@zuhile/react

React component for the Zuhile AI support chat widget.

Install

npm install @zuhile/react
# or: pnpm add @zuhile/react / yarn add @zuhile/react

Usage

Render <ZuhileWidget /> once, near your app root. It injects the hosted widget script and boots it — the launcher appears in the bottom-right corner. It renders nothing itself.

import { ZuhileWidget } from '@zuhile/react';

export default function App() {
  return (
    <>
      {/* your app */}
      <ZuhileWidget publicKey="pk_live_xxx" />
    </>
  );
}

Get your public key from the dashboard → Settings → Embed.

Controlling it

Open/close/toggle the widget from your own buttons:

import { useZuhileWidget } from '@zuhile/react';

function SupportButton() {
  const { open, ready } = useZuhileWidget();
  return (
    <button onClick={open} disabled={!ready}>
      Chat with us
    </button>
  );
}

Or use the imperative helpers anywhere (even outside React):

import { openZuhile, closeZuhile, toggleZuhile } from '@zuhile/react';

openZuhile();

Props

| Prop | Type | Default | Description | | ------------ | -------- | ------------------------------ | -------------------------------------------------- | | publicKey | string | — | Required. Your widget public key. | | apiUrl | string | https://ai-api.usezuhile.com | API gateway base URL (set this for self-hosting). | | brandColor | string | from dashboard | Optional hex brand colour override. | | scriptUrl | string | Zuhile CDN | Override the hosted widget bundle URL. |

Notes

• The widget renders inside a closed shadow DOM, so it never clashes with your app's styles.
• It's a singleton — safe to keep mounted across route changes; it persists the conversation.
• Next.js: this works in a Client Component, but for next/script-optimised loading use @zuhile/nextjs.