Sidebar Chat (JS)

Overview

A "sidebar chat" is a chat UI that is displayed in a sidebar on the either the left or right side of the page and is resizable.

Scenarios

You may want to add a sidebar chat directly into your application for a copilot-like experience. Allowing users to chat with the AI assistant directly in your application without needing to leave the context of your application can help them get answers to their questions faster.

Quick start

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js"
  defer
></script>

 
<div style="display: flex; flex-direction: row; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow: hidden;">
<div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow-y: auto; flex: 1;">
  <!-- your app content here -->
</div>
<!-- the sidebar chat will be inserted into this div -->
<div id="sidebar-chat"></div>
</div>

 
<div style="display: flex; flex-direction: row; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow: hidden;">
<div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow-y: auto; flex: 1;">
  <!-- your app content here -->
   <button data-inkeep-sidebar-chat-trigger="">Toggle Sidebar Chat</button> 
</div>
<!-- the sidebar chat will be inserted into this div -->
<div id="ikp-sidebar-chat-target"></div>
</div>

<script type="module">
  const config = {
    baseSettings: {
      apiKey: "YOUR_API_KEY",
    },
    aiChatSettings: {
      exampleQuestions: [
        "How do I get started?",
      ],
    },
  };
 
  // Initialize the widget
  const widget = Inkeep.SidebarChat("#ikp-sidebar-chat-target", config);
</script>

Sidebar Chat Props

This type represents the configuration for the Inkeep sidebar chat widget.

Examples

Change the sidebar position

const config = {
  // ... other config
  position: "left",
};
 
const widget = Inkeep.SidebarChat("#ikp-sidebar-chat-target", config);

With AI Chat Settings

const config = {
  // ... other config
  aiChatSettings: {
    aiAssistantName: "Support Assistant",
    introMessage: "👋 Hi! How can I help you today?",
  },
};
 
const widget = Inkeep.SidebarChat("#ikp-sidebar-chat-target", config);

Refer to the 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 chat methods

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

// Access chat methods
chat.clearChat();
chat.submitMessage("Hello!");

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