Install the live chat widget
One script tag adds the Sellio chat widget to your website. Visitors get a chat bubble; you get every conversation in the shared inbox, next to WhatsApp, Instagram, Telegram and email.
How to install
Installing takes three steps and no build changes. The widget is a small loader script that draws the chat bubble and opens the chat window in an iframe served by Sellio, so nothing about your own pages is modified beyond the one tag.
Copy your widget key
In Sellio open Settings → Install. The key identifies your workspace; it is public and safe to commit.
Paste the snippet
Add the script below before </body> on every page where the bubble should appear, with your key as widgetKey.
Send a test message
Deploy, open your site, write a message in the widget, and watch it arrive in your inbox in real time.
The snippet
This is the whole install. It loads asynchronously, so it never delays your page, and it works on any site that can add a script tag.
<link rel="preconnect" href="https://sellio.chat">
<link rel="preconnect" href="https://sellio.chat" crossorigin>
<script>
window.sellioSettings = { widgetKey: "your-widget-key" };
(function (w, d) {
w.SellioWidget = w.SellioWidget || [];
var s = d.createElement("script");
s.src = "https://sellio.chat/widget/embed.js";
s.async = true;
d.head.appendChild(s);
})(window, document);
</script>Replace your-widget-key with the key from Settings → Install. If your app knows who is signed in, tell the widget so agents see a name and email instead of an anonymous visitor:
SellioWidget.setVisitor({
id: "your-user-id",
name: "Ada Lovelace",
email: "ada@example.com",
});SellioWidget methods before the script has finished loading. Calls are queued and replayed once the widget is ready, so the order of your scripts does not matter. The full list of methods is in the Widget JavaScript API.Verify it works
After deploying, open your site in a private window so you are treated as a new visitor. You should see the chat bubble in the corner within a second of the page loading. Open it and send a message.
- In Sellio, the conversation appears at the top of Inbox under Unassigned, marked with the website channel and the page the visitor wrote from.
- Reply from the inbox. The reply shows in the widget without a page refresh; visitors also get a browser notification if they allowed it.
- Open Settings → Install again: the page shows “Widget live” with the domain it was last seen on.
Framework guides
The snippet above works everywhere. These guides show the idiomatic place to put it in each framework. Not listed? The HTML guide applies to Vue, Nuxt, Svelte, Astro and anything else that renders a page.
Common questions
- Does the widget slow down my site?
- No. The loader is a few kilobytes, loads after your page, and the chat window itself only loads when a visitor opens it. It does not touch your layout or your Core Web Vitals.
- Can I show it only on some pages?
- Yes. Either add the snippet only to those pages, or keep it everywhere and set visibility rules by path under Settings → Widget. You can also open and close it from your own buttons with
SellioWidget.open()andSellioWidget.close(). - Can I match my brand?
- Colors, launcher position, welcome message and the questions the widget asks before a chat are all set in Settings → Widget, with no code change. Changes apply to every site the key is installed on.
- Is the widget key a secret?
- No. It only identifies the workspace to the widget and grants no access to your data. The domains it is allowed on are set under Settings → Install.
Updated . Something wrong or missing? Tell us.