@sintonai/react-widget

Official React component to embed the Sintonai AI chat & voice widget on your site — one component, no manual script tags.

Install

npm install @sintonai/react-widget
# or
yarn add @sintonai/react-widget
# or
pnpm add @sintonai/react-widget

Usage

Render the component once, near the root of your app:

import { SintonaiWidget } from "@sintonai/react-widget";

export default function App() {
  return (
    <>
      {/* your app */}
      <SintonaiWidget agentId="YOUR_AGENT_ID" />
    </>
  );
}

The floating button appears in the bottom-right corner automatically. You can find your Agent ID in the dashboard → Channels → Embed.

Props

| Prop | Type | Default | Description | | --------------- | ----------------------------------- | ---------------- | -------------------------------------------- | | agentId | string (required) | — | Your agent ID. | | position | "bottom-right" \| "bottom-left" | "bottom-right" | Corner where the button is placed. | | autoOpenDelay | number (ms) | — | Auto-open the chat after N ms. Omit to disable. | | baseUrl | string | Sintonai API | Override the API base URL (advanced / self-hosting). |

<SintonaiWidget agentId="YOUR_AGENT_ID" position="bottom-left" autoOpenDelay={5000} />

Controlling the widget

Use the useSintonaiWidget hook to open, close or send a message:

import { SintonaiWidget, useSintonaiWidget } from "@sintonai/react-widget";

function HelpButton() {
  const widget = useSintonaiWidget();
  return <button onClick={() => widget.open()}>Need help?</button>;
}

// Somewhere in your tree:
// <SintonaiWidget agentId="YOUR_AGENT_ID" />

Available methods: open(), close(), send(message: string).

Notes

• Native React — the chat UI is rendered with real React components (no <script> injection, no CDN dependency). The bundle is ~12 KB and theming, welcome messages and suggestions are pulled from your agent's config automatically.
• Streaming replies, markdown, action suggestions, image cards, tool-status indicators and iOS keyboard handling are all built in.
• Render <SintonaiWidget> only once per app, near the root.
• Voice (ElevenLabs) is not yet included in the native component — for voice use the script embed from the dashboard for now.

Next.js

For the Next.js App Router you can also use the component directly in a client component, or use next/script — see the dashboard's Next.js tab.

License

MIT