Docs · Product

Chat widget

One script tag, no dependencies. Drops into any HTML page, renders in its own shadow DOM, and starts collecting messages immediately.

Install

Copy the snippet from Settings → Installation — it comes pre-filled with your workspace ID, with tabs for plain HTML, WordPress, React, and Next.js. The plain-HTML version:

index.htmlhtml

<script async
  src="https://leadiosa.com/widget.js"
  data-workspace="YOUR_WORKSPACE_ID">
</script>

The script loads asynchronously, mounts a launcher button in the corner, and connects to the real-time backend when the visitor opens the chat.

Tip

On WordPress, skip the manual snippet — install the Leadiosa plugin instead. It injects the widget, walks you through a first-run wizard, and can sync your WooCommerce catalog into the AI knowledge base. See Integrations.

Data attributes

Attribute	Default	Description
`data-workspace`	—	Required. Your workspace ID from Settings → Installation.
`data-title`	From workspace settings	Overrides the chat panel heading for this page.
`data-color`	From workspace settings	Overrides the accent color for this page (any CSS color).

Everything else — welcome text, launcher position, required visitor fields, offline behaviour — is configured per workspace in Settings → Widget and applies everywhere the widget is installed, no redeploy of your site needed.

Appearance and language

The widget ships in eleven languages and picks the visitor's automatically from navigator.language, falling back to English.

It renders inside a closed shadow DOM, so your site's CSS never bleeds into the widget and the widget's styles never leak out. It won't conflict with React, Vue, htmx, or anything else on the host page.

Allowed domains

By default the widget answers on any domain that embeds your workspace ID. To stop someone else from mounting your widget on their site, list your domains under Settings → Widget → Allowed domains. Once the list is non-empty, the backend rejects widget sessions from any other origin.

Watch out

Your workspace ID is visible in your page source — that's by design, it isn't a secret. The allowed-domains list is what makes it useless to anyone else. Set it before going live.

Controlling it from your code

Once loaded, the widget exposes a small global — window.LeadiosaChat — for driving the panel from your own buttons and links:

javascript

LeadiosaChat.open();    // open the chat panel
LeadiosaChat.close();   // close it
LeadiosaChat.toggle();  // toggle open/closed

Prefer event-driven wiring without touching globals? Dispatch the equivalent events on window:

javascript

document.querySelector("#talk-to-us").addEventListener("click", () => {
  window.dispatchEvent(new Event("leadiosa:open"));
});
// also available: "leadiosa:close", "leadiosa:toggle"

Privacy and consent

When a visitor sends a message, you (the workspace operator) become the data controller for that message under GDPR — see our GDPR page for the full breakdown.

We recommend mentioning live chat in your privacy notice, and (if your cookie banner gates non-essential scripts) only loading widget.js after the visitor opts in. The widget stores a session identifier in the visitor's browser so they can return to the same conversation later.

PreviousGetting started Next Operator inbox