Docs

Everything you need to set up, configure, and get value from the Hi, I'm Kai conversation layer.

Installing the Kai widget

This page covers floating and inline snippets, origin authorization, preview behavior, and placement in traditional or single-page websites.

How do I add the embed snippet?

The Widget page generates the snippet for the currently selected site. Choose Floating for a corner launcher and chat panel, or Inline to fill a container in your page.

For the floating widget, choose Floating and select Copy install snippet. Paste the generated asynchronous script before the closing </body> tag on every page where the widget should appear:

<script
  src="https://cdn.example.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

The actual CDN host and data-site-id come from the dashboard; the values above are placeholders.

For an inline widget, add a container, choose Inline, and enter its Target selector. The generated snippet includes both the container and a data-target attribute:

<div id="cl-widget"></div>
<script
  src="https://cdn.example.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  data-target="#cl-widget"
  async
></script>

The iframe fills the target element, so give that element the width and height your layout requires.

How do allowed domains work?

The widget only loads on authorized origins. Open Widget, then use Domains & features and Add domain for every production, staging, preview, or local-development origin.

Enter one origin at a time. Inputs such as hiimkai.ai are normalized to an HTTPS origin, while localhost and 127.0.0.1 use HTTP by default. Scheme and port matter: https://example.com and https://staging.example.com are separate entries, as are local ports.

Existing entries have a Remove button. At least one allowed domain must remain. Dashboard preview is authorized separately, so you do not need to add hiimkai.ai just to use Preview.

How do I install Kai in a single-page app?

For React, Next.js, Vue, or similar applications, place the generated snippet in the root HTML shell or framework script component so it loads once. Do not add it in a component that remounts on every route.

Typical locations include index.html, _document.tsx, or a root layout. The current embed does not require route-specific setup; keep the same site ID and allowed origin as visitors navigate.

How do I verify the installation?

  1. In Widget, make sure the control says Hide widget. That means installed widgets are currently visible.
  2. Select Preview to confirm colors, copy, voice, and the footer.
  3. Open an authorized page containing the snippet.
  4. If no widget appears, verify the exact origin, the target selector for inline mode, and that the snippet uses the generated site ID.

Free widgets show the Powered by Kai Roses footer. Hide branding is available on Growth and Scale.