Embedded Chat

The EmbeddedChat widget provides a fully embedded chat interface that you can integrate directly into your JavaScript application's layout. Unlike modal or sidebar implementations, the embedded chat becomes part of your page structure, perfect for dedicated support pages, dashboards, or help centers.

Quick Start

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

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@inkeep/agents-ui-js@0.14/dist/embed.js"
    defer

> </script>

Define an element in your page that will be the "container" for the embedded 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-chat-target"></div>
  </div>
</div>

Insert the EmbeddedChat widget by using the Inkeep.EmbeddedChat() function.

<script type="module">
  const config = {
    aiChatSettings: {
      agentUrl: "https://your-api.example.com/api/chat",
      apiKey: process.env.INKEEP_API_KEY, // Your API key
    },
  };

  // Initialize the widget
  const widget = Inkeep.EmbeddedChat("#ikp-embedded-chat-target", config);
</script>

Config

Prop

Type

Base Settings

Prop

Type

AI Chat Settings

Prop

Type

Quick Start

Config

Base Settings

AI Chat Settings

On this page