Chatbot toggle

Basic toggle

To allow users to open and close the chatbot window as needed, add a toggle.

Basic toggle screenshot

Custom toggle icon

A custom icon can be passed to the toggle. To ensure the icon is visible in both light and dark themes, use an SVG image and set fill="currentColor".

Custom toggle icon screenshot

Props

ChatbotToggle

*required
NameTypeDefaultDescription
closedToggleIcon() => JSX.ElementAn image displayed in the chatbot toggle when it is closed
isChatbotVisiblebooleanFlag indicating visibility of the chatbot appended to the toggle
onToggleChatbot() => voidCallback fired when toggle button is clicked
toggleButtonLabelstringAccessible label for the toggle button
toolTipLabelReact.ReactNodeContents of the tooltip applied to the toggle button
tooltipPropsOmit<TooltipProps, 'content'>Props spread to the PF Tooltip component
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.