Installation

Adding the widget to your site takes one snippet.

Get your snippet

In the dashboard, open Settings → Embed and copy the snippet. It already contains your public key and the correct URLs.

Paste it before `</body>`

Add it to every page where you want the widget, ideally just before the closing </body> tag:


<script
  src="https://ai-api.usezuhile.com/widget/zuhile-widget.js"
  data-public-key="pk_your_public_key"
  data-api="https://ai-api.usezuhile.com">
</script>

src — the widget bundle, served by the Zuhile gateway (https://ai-api.usezuhile.com).
data-public-key — your workspace’s public key (safe for client-side HTML).
data-api — the Zuhile gateway base URL (the widget calls it for chat, config, and realtime). Already filled in above.

Done

The launcher appears in the corner. When a visitor opens it, they’re chatting with your AI agent, grounded in your knowledge base.

⚠️

Replace pk_... with your workspace’s public key from the dashboard — don’t copy the example above verbatim. The snippet in Settings → Embed already has the right values filled in.

Framework snippets

HTML


<script
  src="https://ai-api.usezuhile.com/widget/zuhile-widget.js"
  data-public-key="pk_your_public_key"
  data-api="https://ai-api.usezuhile.com">
</script>

Next.js


// app/layout.tsx
import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://ai-api.usezuhile.com/widget/zuhile-widget.js"
          data-public-key="pk_your_public_key"
          data-api="https://ai-api.usezuhile.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

React


import { useEffect } from 'react'
 
export function ZuhileWidget() {
  useEffect(() => {
    const s = document.createElement('script')
    s.src = 'https://ai-api.usezuhile.com/widget/zuhile-widget.js'
    s.dataset.publicKey = 'pk_your_public_key'
    s.dataset.api = 'https://ai-api.usezuhile.com'
    document.body.appendChild(s)
    return () => { s.remove() }
  }, [])
  return null
}

Allowed domains

For security, the widget only runs on domains you’ve allowlisted. Add your production and staging domains under Settings → Widget so the key can’t be reused on sites you don’t control.

Next steps

Style it and set the welcome copy → Configuration
Open/close it from your own buttons → JavaScript API