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.

PropertyTypeDescription
chatButtonTypeChatButtonTypesType of the chat button. Can be ICON_TEXT_SHORTCUT, ICON_TEXT, or ICON. Default value ICON_TEXT_SHORTCUT.
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.
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_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
    },
};
PrivacySearch Bar