Setup ChatKit

Quick Start (CDN auto‑init)

Paste this into your page just before </body>:

<!-- 1) Drop-in loader -->
<script id="knoonChatKit"
  src="https://cdn.knoon.ai/chatkit/latest/knoon-chatkit.min.js"
  data-origin="support.example.com"
  data-color="#4f46e5"
  data-chatbox-id="YOUR_CHATBOX_ID"
  data-theme="auto"
  data-hello="false"
  data-locale="en"
  data-launch="true"
  data-manual-sign-in="true"
  type="module"></script>

<!-- 2) (Optional) Hooks / Auth -->
<script>
  window.KnoonChatKit = {
    ...(window.KnoonChatKit || {}),

    // Return credentials when manual sign-in is desired.
    // Should resolve to { jwt: string, expiresAt: string|number, domain?: string }
    async signIn () {
      // TODO: fetch a short‑lived JWT for this visitor from your backend
      return null; // return null/undefined to fall back to guest flow
    },

    // Called when manual sign-in is required (see `data-manual-sign-in`)
    // Should also resolve to { jwt, expiresAt, domain? } when the user completes auth.
    async requestSignIn () {
      // TODO: show your own sign-in UI and return creds
      return null;
    },

    // Optional: receive lifecycle callbacks
    on (event, payload) {
      // events: 'loaded' (payload: 'widget' | 'chatbox'), 'closed'
      // console.log('ChatKit event:', event, payload)
    }
  }
</script>

A round chat button appears at the bottom‑right; clicking it opens the chatbox.

Note: data-origin must be your approved Knoon.ai custom domain (e.g. support.example.com).

Alternative: Programmatic Init (ESM / dynamic import)

If you prefer to load and initialize the widget yourself:

<script type="module">
  window.KnoonChatKit = {
    ...(window.KnoonChatKit || {}),
    async signIn () { return null },
    async requestSignIn () { return null },
    on (event, payload) { /* ... */ }
  }

  const config = {
    origin: 'support.example.com',
    color: '#4f46e5',
    chatBoxId: 'YOUR_CHATBOX_ID',
    theme: 'auto',            // 'auto' | 'light' | 'dark'
    hello: false,             // greet visitor with a hello screen
    localeCode: 'en',         // BCP-47 e.g. 'en', 'zh-Hans'
    launch: true,             // show the floating button
    manualSignIn: true        // show a sign-in button inside the widget when needed
  }

  import('https://cdn.knoon.ai/chatkit/latest/knoon-chatkit.min.js').then((_) => {
    if (window.KnoonChatKit?.init) {
      window.KnoonChatKit.init(config)
    }
  })
</script>

Required Settings

Optional Settings

Pass booleans as strings in HTML: data-hello="true", data-launch="false".