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 is translated automatically.

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.

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.