React
Chat Button
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, dashboard, or documentation without changing your current search experience.
Quick Start
Install the widget
npm
bun
pnpm
yarn
npm install @inkeep/widgets
Define the component
import {
InkeepChatButton,
type InkeepChatButtonProps,
type InkeepWidgetBaseSettings,
} from "@inkeep/widgets";
const baseSettings: InkeepWidgetBaseSettings = {
apiKey: process.env.INKEEP_INTEGRATION_API_KEY!,
integrationId: process.env.INKEEP_INTEGRATION_ID!,
organizationId: process.env.INKEEP_ORGANIZATION_ID!,
organizationDisplayName: "Inkeep",
primaryBrandColor: "#522FC9",
};
const inkeepChatButtonProps: InkeepChatButtonProps = {
chatButtonType: "ICON_TEXT_SHORTCUT",
baseSettings: {
...baseSettings,
},
modalSettings: {
// optional typeof InkeepModalSettings
},
searchSettings: {
// optional typeof InkeepSearchSettings
},
aiChatSettings: {
// optional typeof InkeepAIChatSettings
},
};
export const ChatButton = () => {
return <InkeepChatButton {...inkeepChatButtonProps} />;
};
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
},
};