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 component library

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: "#26D6FF",
};

const inkeepChatButtonProps: InkeepChatButtonProps = {
  chatButtonType: 'ICON_TEXT', // default. Alternatives are 'ICON_TEXT_SHORTCUT' and 'ICON'
  baseSettings: {
    ...baseSettings,
  },
  modalSettings: {
    // optional typeof InkeepModalSettings
  },
  searchSettings: {
    // optional typeof InkeepSearchSettings
  },
  aiChatSettings: {
    // optional typeof 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?",
    ],
  },
};

export const ChatButton = () => {
  return <InkeepChatButton {...inkeepChatButtonProps} />;
};

​
InkeepChatButtonProps

This type represents the configuration for the Inkeep Chat Button widget.

​
Properties

All properties are optional.

PropertyTypeDescription
chatButtonTypeChatButtonTypesType of the chat button. Can be ICON_TEXT_SHORTCUT, ICON_TEXT, or ICON. Default value ICON_TEXT.
isPositionFixedbooleanDetermines whether the position of the chat button is fixed. Default value true.
fixedPositionXOffsetstringX offset for the fixed position of the chat button. Default value 1.5rem
fixedPositionYOffsetstringY offset for the fixed position of the chat button. Default value 1.5rem.
chatButtonBgColorstringBackground color of the chat button.
chatButtonBgColorDarkModestringBackground color of the chat button in dark mode.
chatButtonPillTextstringText on the chat button if using the ICON_TEXT version. Default is Ask AI.
chatButtonPillTextstringText on the chat button if using the ICON_TEXT_SHORTCUT version. Default is Ask anything.
stylesheetUrlsstring[]Optional. An array of strings. The strings must be valid absolute or relative URLs to CSS files.
baseSettingsInkeepWidgetBaseSettingsRequired. Base settings for any Inkeep widget. See reference here.
modalSettingsInkeepModalSettingsSettings for the modal. See reference here.
searchSettingsInkeepSearchSettingsAdditional search settings for the Inkeep widget. See reference here.
aiChatSettingsInkeepAIChatSettingsAI chat settings for the Inkeep widget. See reference here.

​
ChatButtonType

There are three variations of the chat button. The default is ICON_TEXT.

​
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
    },
};
PrivacySearch Bar