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