Mount once, anywhere
A loader component near the root injects the script and cleans up on unmount. Guides for React, Next.js App Router, Vue, Nuxt, Svelte and Astro.
ReactA live chat widget for React apps, with a JavaScript API and verified identity
The widget is a small loader you mount once. From there your app owns it: identify the signed-in user with a signed hash so nobody can impersonate them, open the chat from your own button, listen for new messages, and unmount cleanly on route changes.
No credit card. Live in minutes.
InstallThe snippet, and where it goes on React
Paste this into a component rendered once near your app's root. Replace the placeholder with the widget key from Settings, then Install; the snippet there already carries it.
Add the loader component below and render it once, for example in App or your root layout.
After sign-in, call window.SellioWidget.setVisitor({ id, name, email, userHash }).
Subscribe with window.SellioWidget.on("unreadChange", fn) to show a badge on your own button.
- Framework guides for Next.js, Vue, Nuxt, Svelte and Astro are in the install docs.
SellioWidget.tsx
import { useEffect } from "react";
const WIDGET_KEY = "YOUR_WIDGET_KEY";
const EMBED_SRC = "https://sellio.chat/widget/embed.js";
export function SellioWidgetLoader() {
useEffect(() => {
window.sellioSettings = { widgetKey: WIDGET_KEY };
window.SellioWidget = window.SellioWidget || [];
if (document.getElementById("sellio-embed")) return;
const script = document.createElement("script");
script.id = "sellio-embed";
script.src = EMBED_SRC;
script.async = true;
document.head.appendChild(script);
}, []);
return null;
}What a developer gets
Verified identity
Call setVisitor with the user's id, name, email and an HMAC-SHA256 userHash from your server. Unsigned identities are rejected.
A JavaScript API
open, close, toggle, setVisitor, sendMessage, requestFeedback, on and destroy. Calls before load are queued and replayed.
Events
ready, open, close, newMessage and unreadChange, each returning an unsubscribe.
Safe on any origin
Lock the widget to the domains you approve. The loader never touches localStorage unguarded, so partitioned contexts do not break it.
The same inbox behind it
Website chats land beside WhatsApp, Instagram, Telegram and email, with an AI agent on website chat.
Installing in React
- Step 1
Add the loader
Render the loader component once near your root, with your widget key.
- Step 2
Identify the user
When someone signs in, call setVisitor with their id, name, email and the userHash your server computed.
- Step 3
Wire your UI
Open the chat from your own Help button and show an unread count from the unreadChange event.
FAQ
React questions
No. The widget is a script the loader injects, so there is nothing to version in your bundle. The snippet on this page is the whole integration.
- Mount once near the root. A loader component injects the script and cleans up on unmount.
- Drive it from your code. open, close, toggle, setVisitor, sendMessage, requestFeedback, on and destroy; calls before load are queued and replayed.
- Nothing to upgrade in your repo. No dependency to bump; the script loads the current widget.
The widget API docs list every method and event.
Still have a question? Contact us or browse the docs.
A widget your app controls, and an inbox your team works.
Mount once, identify users with a signed hash, drive it from your code.
No credit card required