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

JavaScript example:

<script type="module" defer>
  // Get the button element
  const inkeepButton = document.getElementById("inkeepButton");

  // Create a new div element to hold the Inkeep modal and set its id and position
  const inkeepDiv = document.createElement("div");
  inkeepDiv.id = "inkeepModal";
  inkeepDiv.style.position = "absolute";
  document.body.appendChild(inkeepDiv);

  const handleClose = () => {
    inkeepWidget.render({
      ...config,
      isOpen: false,
    });
  };

  const handleOpen = () => {
    inkeepWidget.render({
      ...config,
      isOpen: true,
    });
  }

  const config = {
    componentType: "CustomTrigger", // required
    targetElement: inkeepDiv, // required
    properties: {
      isOpen: false, // required
      onClose: handleClose, // required
      onOpen: undefined,
      baseSettings: {
        apiKey: process.env.INKEEP_API_KEY!, // required
        integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
        organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
        primaryBrandColor: "#26D6FF",
        organizationDisplayName: "Inkeep",
        //... optional base settings
      },
      modalSettings: {
        // optional InkeepModalSettings
      },
      searchSettings: {
        // optional InkeepSearchSettings
      },
      aiChatSettings: {
        // optional InkeepAIChatSettings
        botAvatarSrcUrl: "/img/inkeep-logo.svg",
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  };

  // Embed the widget using the `Inkeep.embed()` function.
  const inkeepWidget = Inkeep().embed(config);

  // Add event listener to open the Inkeep modal when the button is clicked
  inkeepButton.addEventListener("click", handleOpen);
</script>

HTML example:

<!-- Other HTML code -->
<button id="inkeepButton">Open modal</button>
<!-- Other HTML code -->

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.