Chat Button (JS)
Add the Inkeep chat button using a JS snippet.
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
Add the below <script>
tag to the <head>
or <body>
of your website.
<!-- Add Inkeep widget -->
<script
type="module"
src="https://unpkg.com/@inkeep/uikit-js@0.3.12/dist/embed.js"
defer
></script>
Insert the Chat Button by using the Inkeep.embed()
function.
<script type="module" defer>
const inkeepWidget = Inkeep().embed({
componentType: "ChatButton", // required
// optional -- for syncing UI color mode
colorModeSync: {
observedElement: document.documentElement,
isDarkModeCallback: (el) => {
return el.classList.contains("dark");
},
colorModeAttribute: 'class',
},
properties: {
chatButtonType: 'PILL', // default. Alternatives are 'RECTANGLE_SHORTCUT' and 'ICON'
baseSettings: {
apiKey: process.env.INKEEP_API_KEY!, // required
integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
organizationDisplayName: "Inkeep",
primaryBrandColor: "#26D6FF",
//... optional base settings
theme: {
stylesheetUrls: ['/path/to/stylesheets'], // optional
},
},
modalSettings: {
// optional InkeepModalSettings
},
searchSettings: {
// optional InkeepSearchSettings
},
aiChatSettings: {
// optional InkeepAIChatSettings
botAvatarSrcUrl: "/img/inkeep-logo.svg", // use your own bot avatar
botAvatarDarkSrcUrl: "/img/inkeep-logo-dark.svg", // for dark mode or more contrast against button bg
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
}
},
});
</script>
Inkeep.Embed() for Chat Button
Parameter | Type | Description |
---|---|---|
componentType | string | Required. Must be ChatButton to add the ChatButton component. |
targetElement | HTMLElement | A valid HTML element where you want to render the ChatButton component. |
properties | InkeepChatButtonProps | Required. An object that contains the base settings and other optional settings for the ChatButton |
colorModeSync | ColorModeSync | An object that contains the settings to sync the color mode in the widgets with the parent UI. |
ColorModeSync
These settings can be used to sync the widget's color mode with the color mode set in the parent UI.
Parameter | Type | Description |
---|---|---|
observedElement | HTMLElement | Required. Element to observe for color mode change. Example: document.body . |
isDarkModeCallback | (observedElement: Node) => boolean | Required. Function that returns true if dark mode otherwise false. Example: (observedElement) => observedElement.dataset.theme === 'dark' . |
colorModeAttribute | string | Required. Attribute that changes on the observedElement when colorMode changes. Example: "class" or "data-theme" . |
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. |
Example
import type {
InkeepChatButtonProps,
InkeepChatButtonModalSettings,
} from "@inkeep/uikit";
import baseSettings from "./baseSettings"; // your base settings typeof InkeepBaseSettings
const InkeepChatButtonProps: InkeepChatButtonProps = {
chatButtonType: "PILL",
chatButtonBgColor: "#000",
chatButtonBgColorDarkMode: "#fff",
isPositionFixed: true,
fixedPositionXOffset: "1.5rem",
fixedPositionYOffset: "1.5rem",
baseSettings : {
...baseSettings
//... typeof InkeepBaseSettings
},
modalSettings : {
//... typeof InkeepModalSettings
}
searchSettings : {
//... typeof InkeepSearchSettings
},
aiChatSettings : {
//... typeof InkeepAIChatSettings
},
};
Multiple widgets
You may want to add mutliple Inkeep widgets on your site, like both a search bar and a chat button. In these cases, it can be helpful to create a common Inkeep JavaScript object that shares the same base settings for every widget.
const inkeepBase = Inkeep({
integrationId: envConfig.INTEGRATION_ID || "", // required
apiKey: envConfig.API_KEY || "", // required
organizationId: envConfig.ORGANIZATION_ID || "", // required
organizationDisplayName: "Inkeep",
primaryBrandColor: "black",
userId: "", // if you'd like analytics by user ID, like in cases where the user is authenticated or you have your own analytics platform
userEmail: "dev@inkeep.com",
userName: "Inkeep",
optOutAllAnalytics: false,
optOutAnalyticalCookies: false,
optOutFunctionalCookies: false,
});
You can then use inkeepBase.embed()
to add different components with the same base settings.
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 render
method.
The below example illustrates how you change the primary color on the widget when a button is clicked.
const colors = [
'#26D6FF',
'#e300bd',
'#512fc9',
'#fde046',
'#2ecc71',
'#e74c3c',
'#9b59b6',
'#f1c40f',
];
let count = 0;
const changeColorButton = document.getElementById('change-color-button');
changeColorButton.addEventListener('click', () => {
count++;
inkeepWidget.render({
baseSettings: {
primaryBrandColor: colors[count % colors.length],
},
});
});