Widget quickstart

Embed a multilingual support chat on your website in minutes. Visitors write in their own language; your team answers from the Support inbox, and every message can be translated after the sender allows AI processing.

Three steps

In your workspace, open Settings → Web chat and enable the widget.
Add each site origin that may load the widget under Allowed origins (exact scheme + host, e.g. https://example.com).
Copy the embed snippet from the same screen and paste it just before the closing </body> tag.

<script
  src="https://widget.rosettachat.app/widget.js"
  data-site="wgt_your_public_site_key"
  async
></script>

The loader injects a launcher button inside a Shadow DOM host (isolated from your page’s CSS) and an iframe that hosts the chat panel, served from the widget origin. That’s it — a visitor can open the launcher and start a conversation in their own language. The panel includes language switching, attachments, and a desktop maximize control; on phones it opens fullscreen.

Visitor AI choices

The panel explains the AI providers and asks visitors to choose AI processing or original-text chat. Their choice is stored on their guest identity, not inferred from the browser’s language or the website owner’s settings. Visitors can use the AI control to change or withdraw permission. Support Bot replies also require the Workspace owner’s current AI permission, available in Profile and Web chat settings. Original-text human support remains available.

Loader attributes

Everything except data-site is optional; server-side configuration (see Configuration & appearance) is the source of truth for theme and behavior, and these attributes are per-page overrides.

Attribute	Required	Description
`data-site`	✅	Your public site key (`wgt_…`), or a test key (`wgt_test_…`) for the sandbox.
`data-theme-color`	–	Instant launcher color before the panel resolves the site theme (hex).
`data-position`	–	`right` (default) or `left`.
`data-language`	–	Prefer a visitor UI language (BCP-47 tag, e.g. `ja` or `zh-TW`), resolved against the workspace’s supported languages. Defaults to the browser language preferences.
`data-identity`	–	A signed identity token — see Signed visitor identity.
`data-launcher`	–	`manual` hides the default icon at load for a custom launcher.