React

Add Sellio to any React app — Vite, CRA, or a custom setup.

Via index.html

Simplest path: paste the snippet into index.html before the closing </body>:

index.html

<body>
  <div id="root"></div>
  <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>
</body>

Via component

Prefer loading from the React tree? Mount a one-shot loader in your root App:

SellioWidgetLoader.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;
}

ℹ

The empty dependency array injects the script once on mount. Guard with an element id so Strict Mode remounts do not double-load.

Identify visitors

After auth resolves, identify the visitor:

identify.js

SellioWidget.setVisitor({
  id: "your-user-id",
  name: "Ada Lovelace",
  email: "ada@example.com",
});

Verify

Open the app, send a message from the widget, then confirm it in your Sellio inbox.

Updated 14 September 2026. Something wrong or missing? Tell us.

PreviousNext.js NextVue