/Docs
Start free

Astro

Add the chat widget to an Astro site by pasting the snippet into the shared layout, with is:inline so Astro leaves it as written.

Where it goes

On Astro the snippet lives in src/layouts/Layout.astro, before </body>. It is one script tag; it loads asynchronously and never blocks the page.

Layout.astro
---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My site</title>
  </head>
  <body>
    <slot />
    <script is:inline>
  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>
  </body>
</html>

Replace your-widget-key with the key from Settings, then Install. The key is public and safe to commit: it names the workspace and carries no permissions.

Steps

  1. 1
    In Sellio, open Settings, then Install, and copy the snippet with your widget key.
  2. 2
    Open the layout every page uses, usually src/layouts/Layout.astro.
  3. 3
    Paste the snippet before </body> and add is:inline to the script tag, as below, so Astro does not bundle or hoist it.
  4. 4
    Build and open the site; the launcher should be in the bottom corner.
⚠
Without is:inline, Astro processes the script as a module and window.sellioSettings is set after the loader runs, so the widget reports a missing key.

Identify visitors

When your site knows who is signed in, tell the widget so the inbox shows a name and email instead of a visitor id. Safe to call before the loader has finished; commands queue until it is ready.

identify.js
window.SellioWidget = window.SellioWidget || [];
window.SellioWidget.push(["setVisitor", {
  id: "your-user-id",
  name: "Ada Lovelace",
  email: "ada@example.com",
}]);

To stop anyone spoofing a name, sign the id on your server and pass it as userHash; see Identity verification.

Verify

Open the live site, send a message from the launcher, and check your inbox. If the launcher does not appear, the usual causes are a cache that still serves the old page, a visibility rule in Settings, then Visibility that hides it on this page or device, a domain missing from Allowed domains under Settings, then Install, or a snippet pasted into a page-level box rather than the site-wide one.

Updated . Something wrong or missing? Tell us.