Chat Button
The chat button is a great way to add an AI copilot to your landing page, dashboard, or documentation without changing your current search experience.
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/widgets-embed@<version>/dist/embed.js"
defer
></script>
Replace <version>
with the latest version of the Inkeep JS Snippet. Visit https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js to see the latest version of the JS library in the URL.
Insert the Chat Button by using the Inkeep.embed()
function.
<script type="module" defer>
const inkeepWidget = Inkeep().embed({
componentType: "ChatButton", // required
targetElement: document.getElementById("inkeep-placeholder"), // required
stylesheetUrls: ['/path/to/stylesheets'], // optional
properties: {
chatButtonType: 'ICON_TEXT_SHORTCUT', // default. Alternatives are 'ICON_TEXT' and 'ICON'
baseSettings: {
apiKey: process.env.INKEEP_INTEGRATION_API_KEY!, // required
integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
organizationDisplayName: "Inkeep",
primaryBrandColor: "#522FC9",
//... optional base settings
},
modalSettings: {
// optional InkeepModalSettings
},
searchSettings: {
// optional InkeepSearchSettings
},
aiChatSettings: {
// optional InkeepAIChatSettings
}
},
});
</script>
Inkeep.Embed() for Chat Button
Parameter | Type | Description |
---|---|---|
componentType | string | Required. Must be ChatButton to add the ChatButton component. |
targetElement | HTMLElement | Required. 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 |
InkeepChatButtonProps
This type represents the configuration for the Inkeep Chat Button widget.
Properties
All properties are optional.
Property | Type | Description |
---|---|---|
chatButtonType | ChatButtonTypes | Type of the chat button. Can be ICON_TEXT_SHORTCUT , ICON_TEXT , or ICON . Default value ICON_TEXT_SHORTCUT . |
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 . |
stylesheetUrls | string[] | Optional. An array of strings. The strings must be valid absolute or relative URLs to CSS files. |
baseSettings | InkeepWidgetBaseSettings | 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. |
ChatButtonType
There are three variations of the chat button. The default is ICON_TEXT_SHORTCUT
.
Example
import type {
InkeepChatButtonSettings,
InkeepChatButtonModalSettings,
} from "@inkeep/widgets";
import baseSettings from "./baseSettings"; // your base settings typeof InkeepWidgetBaseSettings
const inkeepChatButtonSettings: InkeepChatButtonSettings = {
chatButtonType: "ICON_TEXT",
isPositionFixed: true,
fixedPositionXOffset: "1.5rem",
fixedPositionYOffset: "1.5rem",
baseSettings : {
...baseSettings
//... typeof InkeepWidgetBaseSettings
},
modalSettings : {
//... typeof InkeepModalSettings
}
searchSettings : {
//... typeof InkeepSearchSettings
},
aiChatSettings : {
//... typeof InkeepAIChatSettings
},
};
Multiple components
You may want to add mutliple Inkeep widgets in your landing page. In such case, you can create a common Inkeep object with 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
Inkeep comes with the feature to change the props of a widget after it is initially rendered. you can use the render
method to update an instance of the component with any new properties.
This allows you want to change the color of the widget in the dark mode.
colorModeToggle.addEventListener("change", (e) => {
// whatever logic you use to track the color mode
const newColorMode = e.target.value;
inkeepWidget.render({
baseSettings: {
theme: {
...inkeepWidget.baseSettings.theme,
colorMode: {
forcedColorMode: colorMode === "dark" ? "dark" : "light",
},
},
},
});
});
colorMode
property changes the color of the widget depending upon the current color theme.