Chat Button (JS)
Add the Inkeep chat button using a JS snippet.
Overview
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.
Quick start
Add the below <script>
tag to the <head>
or <body>
of your website.
Insert the Chat Button by using the Inkeep.ChatButton()
function.
Chat Button Props
Chat button props control the behavior and interaction of the chat button.
Prop | Type | Required | Description |
---|---|---|---|
baseSettings | object | Yes | Core configuration settings. See Base Settings for details. |
aiChatSettings | object | No | AI chat configuration settings. See AI Chat Settings for details. |
modalSettings | object | No | Modal configuration settings. See Modal Settings for details. |
label | string | No | Custom label for the chat button. |
canToggleView | boolean | No | Whether to allow toggling between chat and search views. Defaults to true. |
defaultView | 'search' | 'chat' | No | The default view to show when opened. Defaults to 'chat'. |
avatar | string | { light: string, dark: string } | No | URL for ai button's avatar (40x40px recommended) |
Examples
Set the default view
Force the default view
If you want to force the default view to be the search or the chat, you can use the forceDefaultView
property. This is useful to ensure the widget always opens the defaultView instead of last used view.
Refer to the Search Settings and Chat Settings docs for more details on the available properties.
Changing props after initial render
Sometimes you may need to manage change settings after a widget has already been initialized, for example, to update user privacy preferences. To do this, you can use the update
method.
The below example illustrates how you change the primary color on the widget when a button is clicked.
Accessing methods
The instance of the widget object returned by Inkeep.ChatButton()
exposes some methods that you can use to interact with the widget.
Chat Methods
Method | Description |
---|---|
submitMessage(message?: string) | Programmatically sends a message in chat. If message is omitted, sends the current input value. |
updateInputMessage(message: string) | Updates the text in chat input field |
clearChat() | Resets the chat to its initial state |
openForm(formSettings: FormSettings) | Displays a form overlay in chat interface |
focusInput() | Sets focus to the chat input field |
Refer to the Form Settings reference docs for more details on the available properties for the openForm
method.
Search methods
Method | Description |
---|---|
updateQuery(query: string) | Programmatically updates the search query. |
focusInput() | Sets focus to the search input field |
Widget methods
Method | Description |
---|---|
setView(view: ModalViewTypes) | Set the view of the widget to either search or chat |