Web chat widgets

The Saaya chat widget is a single script tag that adds a chat bubble to your site. It is themeable, accessible by default, and can pass identity through to the agent so a logged-in user gets personalised answers.

The embed snippet

<script
  async
  src="https://embed.saaya.ai/widget.js"
  data-agent-id="agt_2N3rH..."
  data-org-id="org_2N3rH..."
></script>

Theming

The widget reads CSS variables off the host page. Override `--saaya-accent`, `--saaya-radius`, `--saaya-font` and the bubble + panel inherit your design system. Dark mode follows the user's OS preference unless you force a value with `data-theme="light|dark"`.

Accessibility

• Keyboard-only operation: open with Cmd/Ctrl+/, close with Esc.
• ARIA labels on every control, focus-trapped panel, restored focus on close.
• Captions on agent voice replies; screen-reader-friendly transcripts.
• Touch targets at least 44px on mobile per WCAG 2.5.5.

Identity passthrough

For logged-in surfaces, mint a short-lived session token from your backend and hand it to the widget. The agent then sees the user as a typed object and you avoid asking the same identity questions twice.

// On your backend.
const token = await saaya.embed.createSessionToken({
  agentId: "agt_2N3rH...",
  user: { id: "u_882", name: "Anu", email: "anu@acme.com", plan: "pro" },
  ttlSeconds: 600,
});

// Hand token.value to your client and pass it to the widget:
// <script src="..." data-session-token="…"></script>