Custom Trigger (React)

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.

Property	Type	Description
isOpen	boolean	Required. 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`.
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 { 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
    },
};

Custom Trigger (React)

Quick Start

InkeepCustomTriggerProps

Example

On this page