​
Quick start

Add the below <script> tag to the <head> or <body> of your website.

<!-- Add Inkeep widget -->
<script
  type="module"
  src="https://unpkg.com/@inkeep/widgets-embed@<version>/dist/embed.js"
  defer
></script>

Replace <version> with the latest version of the Inkeep JS Snippet. Visit https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js to see the latest version of the JS library in the URL.

Insert the Search Bar by using the Inkeep.embed() function.

<script type="module" defer>
  const inkeepWidget = Inkeep().embed({
    componentType: "SearchBar", // required
    targetElement: document.getElementById("inkeep-placeholder"), // required
    properties: {
      stylesheetUrls: ['/path/to/stylesheets'], // optional
      baseSettings: {
        apiKey: process.env.INKEEP_INTEGRATION_API_KEY!, // required
        integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
        organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
        organizationDisplayName: "Inkeep",
        primaryBrandColor: "#522FC9",
        //... optional base settings
      },
      modalSettings: {
        // optional InkeepModalSettings
      },
      searchSettings: {
        // optional InkeepSearchSettings
      },
      aiChatSettings: {
        // optional InkeepAIChatSettings
      }
    },
  });
</script>
ParameterTypeDescription
componentTypestringRequired. Must be SearchBar to add the SearchBar component.
targetElementHTMLElementRequired. A valid HTML element where you want to render the SearchBar component.
propertiesInkeepSearchBarPropsRequired. An object that contains the base settings and other optional settings for the Search Bar

​
InkeepSearchBarProps

This type represents the configuration for the Inkeep search bar widget.

PropertyTypeDescription
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.

​
Multiple components

You may want to add mutliple Inkeep widgets in your landing page. In such case, you can create a common Inkeep object with the same base settings for every widget.

const inkeepBase = Inkeep({
  integrationId: envConfig.INTEGRATION_ID || "", // required
  apiKey: envConfig.API_KEY || "", // required
  organizationId: envConfig.ORGANIZATION_ID || "", // required
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "black",
  userId: "", // if you'd like analytics by user ID, like in cases where the user is authenticated or you have your own analytics platform
  userEmail: "dev@inkeep.com",
  userName: "Inkeep",
  optOutAllAnalytics: false,
  optOutAnalyticalCookies: false,
  optOutFunctionalCookies: false,
});

You can then use inkeepBase.embed() to add different components with the same base settings.

​
Changing props after initial render

Inkeep comes with the feature to change the props of a widget after it is initially rendered. you can use the render method to update an instance of the component with any new properties.

This allows you want to change the color of the widget in the dark mode.

colorModeToggle.addEventListener("change", (e) => {
  // whatever logic you use to track the color mode
  const newColorMode = e.target.value;

  inkeepWidget.render({
    baseSettings: {
      theme: {
        ...inkeepWidget.baseSettings.theme,
        colorMode: {
          forcedColorMode: colorMode === "dark" ? "dark" : "light",
        },
      },
    },
  });
});

colorMode property changes the color of the widget depending upon the current color theme.

Chat ButtonBase