React
Chat Button (React)
Add a chat button React component that triggers the Inkeep modal.
The chat button is a great way to add an AI copilot to your landing page, documentation, or app without changing your current search experience.
You can choose from three variants to fit your style:
The default is PILL
.
Quick Start
Install the component library
Define the component
InkeepChatButtonProps
This type represents the available settings for the Inkeep Chat Button component.
Properties
Property | Type | Description |
---|---|---|
chatButtonType | ChatButtonTypes | Type of the chat button. Can be RECTANGLE_SHORTCUT , PILL , or ICON . Default value PILL . |
chatButtonBgColor | string | Background color of the chat button. Defaults to a dark gray. |
chatButtonBgColorDarkMode | string | Background color of the chat button in dark mode. Defaults to a light gray. |
chatButtonText | string | Text on the chat button if using the PILL or RECTANGLE_SHORTCUT versions. Default is Ask AI for the PILL version and Ask anything for the RECTANGLE_SHORTCUT version. |
isPositionFixed | boolean | Determines whether the position of the chat button is fixed. Default value true . |
fixedPositionXOffset | string | X offset for the fixed position of the chat button. Default value 1.5rem |
fixedPositionYOffset | string | Y offset for the fixed position of the chat button. Default value 1.5rem . |
baseSettings | InkeepBaseSettings | Required. Base settings for any Inkeep widget. See reference here. |
modalSettings | InkeepModalSettings | Settings for the modal. See reference here. |
searchSettings | InkeepSearchSettings | Additional search settings for the Inkeep widget. See reference here. |
aiChatSettings | InkeepAIChatSettings | AI chat settings for the Inkeep widget. See reference here. |