Embedded Search (JS)

Overview

An "embedded search" is a search UI that is directly incorporated into a page instead of within a pop-up modal.

Quick start

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

<script
  type="module"
  src="https://unpkg.com/@inkeep/cxkit-js@^0.5.42/dist/embed.js"
  defer
></script>

Define an element in your page that will be the "container" for the embedded search.

 
<div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);">
  <div style="max-height: 600px; height: 100%;">
    <div id="ikp-embedded-search-target"></div>
  </div>
</div>

Insert the Embedded Search by using the Inkeep.EmbeddedSearch() function.

<script type="module">
  const config = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
    },
    searchSettings: {
      placeholder: "Search...",
    },
  };
 
  // Initialize the widget
  const widget = Inkeep.EmbeddedSearch("#ikp-embedded-search-target", config);
</script>

Embedded Search Props

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

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`searchSettings`	`object`	No	Search configuration settings. See Search Settings for details.
`isHidden`	`boolean`	No	Whether to hide the search interface. Defaults to false.
`shouldAutoFocusInput`	`boolean`	No	Whether to auto focus the input. Defaults to true.
`askAILabel`	`string`	No	The label for the Ask AI button

Examples

Auto Focus Input

const config = {
  // ... other config
  shouldAutoFocusInput: true,
};
 
const widget = Inkeep.EmbeddedSearch("#search", config);

With Search Settings

const config = {
  // ... other config
  searchSettings: {
    placeholder: "Search...",
    debounceTimeMs: 300,
  },
};
 
const widget = Inkeep.EmbeddedSearch("#ikp-embedded-search-target", config);

Refer to the Search Settings docs for more details on the available properties.

Changing props after initial render

Sometimes you may need to manage change settings after a widget has already been initialized, for example, to update user privacy preferences. To do this, you can use the update method.

The below example illustrates how you change the primary color on the widget when a button is clicked.

const colors = [
  "#26D6FF",
  "#e300bd",
  "#512fc9",
  "#fde046",
  "#2ecc71",
  "#e74c3c",
  "#9b59b6",
  "#f1c40f",
];
 
let count = 0;
 
const changeColorButton = document.getElementById("change-color-button");
 
changeColorButton.addEventListener("click", () => {
  count++;
  widget.update({
    baseSettings: {
      primaryBrandColor: colors[count % colors.length],
    },
  });
});

Accessing search methods

The instance of the search object returned by Inkeep.EmbeddedSearch() exposes some methods that you can use to interact with the search.

// Access search methods
search.updateQuery("Hello!");
search.focusInput();

Method	Description
`updateQuery(query: string)`	Programmatically updates the search query.
`focusInput()`	Sets focus to the search input field

Embedded Search (JS)

On this page