Chat Button (React)

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

Install the component library

npm install @inkeep/uikit

bun add @inkeep/uikit

pnpm add @inkeep/uikit

yarn add @inkeep/uikit

Define the component

import {
  InkeepChatButton,
  type InkeepChatButtonProps,
  type InkeepBaseSettings,
} from "@inkeep/uikit";
 
const baseSettings: InkeepBaseSettings = {
  apiKey: process.env.INKEEP_API_KEY!,
  integrationId: process.env.INKEEP_INTEGRATION_ID!,
  organizationId: process.env.INKEEP_ORGANIZATION_ID!,
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#26D6FF",
};
 
const InkeepChatButtonProps: InkeepChatButtonProps = {
  chatButtonType: 'PILL', // default. Alternatives are 'RECTANGLE_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 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
    },
};