Skip to Content
Chat widgetJavaScript API

JavaScript API

Once the script has loaded, the widget exposes a small global, window.ZuhileWidget, so you can open it from your own buttons or control initialization yourself.

Methods

interface ZuhileWidget {
  init(config: { publicKey: string; apiUrl: string }): WidgetHandle
  open(): void    // open the chat panel
  close(): void   // close the chat panel
  toggle(): void  // toggle open/closed
}

Open from your own button

<button onclick="window.ZuhileWidget.open()">Chat with us</button>
document.querySelector('#help').addEventListener('click', () => {
  window.ZuhileWidget.toggle()
})

Guard for load order if you call these very early: the global exists only after the widget script has run. A simple window.ZuhileWidget?.open() is enough on a user click, since by then the script has loaded.

Initialization options

You have three ways to start the widget — pick one.

The snippet’s data-* attributes auto-initialize the widget. This is what the dashboard gives you:

<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>

2. Programmatic init()

Load the script without data-public-key, then start it yourself:

<script src="https://ai-api.usezuhile.com/widget/zuhile-widget.js"></script>
<script>
  window.ZuhileWidget.init({
    publicKey: 'pk_your_public_key',
    apiUrl: 'https://ai-api.usezuhile.com',
  })
</script>

3. Pre-declared config

Set a config object before the script loads and it will pick it up:

<script>
  window.__ZUHILE__ = {
    publicKey: 'pk_your_public_key',
    apiUrl: 'https://ai-api.usezuhile.com',
  }
</script>
<script src="https://ai-api.usezuhile.com/widget/zuhile-widget.js"></script>
⚠️

Use one initialization method. If the script auto-inits from data-public-key, don’t also call init() — that would mount the widget twice.

ConfigurationTroubleshooting