Ui componentsJs snippet

Embedded Search and Chat (JS)

Add a toggleable search and chat UI directly on a dedicated page

Overview

This is a toggleable chat / search UI that is directly incorporated into a page instead of within a pop-up modal.

It's a combination of the Embedded Chat and the Embedded Search components, allowing you to toggle between chat and search.

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 and chat.

 
<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-and-chat-target"></div>
  </div>
</div>

Insert the Embedded Search and Chat by using the Inkeep.EmbeddedSearchAndChat() function.

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

Embedded Search Props

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

PropTypeRequiredDescription
baseSettingsobjectYesCore configuration settings. See Base Settings for details.
searchSettingsobjectNoSearch configuration settings. See Search Settings for details.
isHiddenbooleanNoWhether to hide the search interface. Defaults to false.
shouldAutoFocusInputbooleanNoWhether to auto focus the input. Defaults to true.
askAILabelstringNoThe label for the Ask AI button in search, also shown in the search/chat toggle
searchLabelstringNoThe label for the search item in the search/chat toggle.

Examples

Set the default view

const config = {
  // ... other config
  defaultView: "chat", // or "search"
};
 
const widget = Inkeep.EmbeddedSearchAndChat(
  "#ikp-embedded-search-and-chat-target",
  config
);

Force the default view

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.EmbeddedSearchAndChat(
  "#ikp-embedded-search-and-chat-target",
  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.EmbeddedSearchAndChat() exposes some methods that you can use to interact with the widget. You can access both the search and the chat methods.

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

Chat Methods

MethodDescription
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

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

Widget methods

type ModalViewTypes = "search" | "chat";
MethodDescription
setView(view: ModalViewTypes)Set the view of the widget to either search or chat

On this page