Use the “Custom Trigger” component if you want to use a custom button, search bar, link, or any other UI element to open the Inkeep AI search or chat modal.

​
Quick Start

import React, { useState } from "react";
import {
  InkeepCustomTrigger,
  InkeepCustomTriggerProps,
  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 InkeepCustomTriggerComponent: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = useCallback(() => {
    console.log("Modal closed");
    setIsOpen(false);
  }, []);

  const inkeepCustomTriggerProps: InkeepCustomTriggerProps = {
    isOpen,
    onClose: handleClose,
    baseSettings,
  };

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Modal</button>
      <InkeepCustomTrigger {...inkeepCustomTriggerProps} />
    </div>
  );
};

export default InkeepCustomTriggerComponent;

​
InkeepCustomTriggerProps

This type represents the configuration for the Inkeep custom trigger widget.

PropertyTypeDescription
isOpenbooleanRequired. Determines whether the modal is open.
onClose() => void Required. Callback for when the modal is closed.
onOpen() => void Callback for when the modal is opened. Default undefined.
baseSettingsInkeepBaseSettingsRequired. 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.

​
Example

import type { InkeepCustomTriggerProps } from "@inkeep/uikit";
import baseSettings from "./baseSettings"; // your base settings typeof InkeepBaseSettings

const modalSettings: InkeepCustomTriggerProps = {
    isOpen: false,
    onClose: undefined,
    onOpen: undefined,
    baseSettings : {
        ...baseSettings,
    },
    modalSettings : {
        //... typeof InkeepModalSettings
    }
    searchSettings : {
        //... typeof InkeepSearchSettings
    },
    aiChatSettings : {
        //... typeof InkeepAIChatSettings
    },
};
Embedded ChatChat Button