Search Bar (JS)

Overview

The search bar is a great way to add an AI powered search bar to your website.

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.40/dist/embed.js"
  defer
></script>

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

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    organizationDisplayName: "Your Company",
    primaryBrandColor: "#4F46E5",
  },
  searchSettings: {
    placeholder: "Search documentation...",
  },
};
 
const searchBar = Inkeep.SearchBar("#search-bar", config);

Search Bar Props

Search bar props control the behavior and interaction of the search bar.

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`aiChatSettings`	`object`	No	AI chat configuration settings. See AI Chat Settings for details.
`modalSettings`	`object`	No	Modal configuration settings. See Modal Settings for details.
`canToggleView`	`boolean`	No	Whether to allow toggling between chat and search views. Defaults to true.
`defaultView`	`'search' \| 'chat'`	No	The default view to show when opened. Defaults to 'chat'.

Examples

Set the default view

const config = {
  // ... other config
  defaultView: "search", // or "chat"
};
 
const widget = Inkeep.SearchBar(config);

If you want to force the default view to be the search or the chat, you can use the forceDefaultView property. This is useful to ensure the widget always opens the defaultView instead of last used view.

const config = {
  // ... other config
  forceDefaultView: true,
};
 
const widget = Inkeep.SearchBar(config);

Refer to the Search Settings and Chat 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 methods

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

// Access search methods
widget.search.updateQuery("Hello!");
widget.search.focusInput();
 
// Access chat methods
widget.chat.clearChat();
widget.chat.focusInput();
 
// Access widget methods
widget.setView("search");

Chat Methods

Method	Description
`submitMessage(message?: string)`	Programmatically sends a message in chat. If message is omitted, sends the current input value.
`updateInputMessage(message: string)`	Updates the text in chat input field
`clearChat()`	Resets the chat to its initial state
`openForm(formSettings: FormSettings)`	Displays a form overlay in chat interface
`focusInput()`	Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

Search methods

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

type ModalViewTypes = "search" | "chat";

Method	Description
`setView(view: ModalViewTypes)`	Set the view of the widget to either search or chat