Next.js

Add Sellio with next/script so the embed loads outside your app bundle.

Add the widget

Copy your widget key from Settings → Install, then add settings + the embed script to the right file for your router.

✦

Set window.sellioSettings before embed.js runs — that is what the loader reads for widgetKey.

App Router

Add both scripts to your root app/layout.tsx:

app/layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="sellio-settings" strategy="beforeInteractive">
          {`window.sellioSettings = { widgetKey: "your-widget-key" };`}
        </Script>
        <Script
          src="https://sellio.chat/widget/embed.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Add the scripts to pages/_app.tsx:

pages/_app.tsx

import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script id="sellio-settings" strategy="beforeInteractive">
        {`window.sellioSettings = { widgetKey: "your-widget-key" };`}
      </Script>
      <Script
        src="https://sellio.chat/widget/embed.js"
        strategy="afterInteractive"
      />
    </>
  );
}

Identify visitors

From a client component, queue setVisitor once you know the signed-in user:

components/sellio-identify.tsx

"use client";

import { useEffect } from "react";

export function SellioIdentify({
  id,
  name,
  email,
}: {
  id: string;
  name?: string;
  email?: string;
}) {
  useEffect(() => {
    const w = window as Window & {
      SellioWidget?: Array<[string, ...unknown[]]> | { setVisitor: (v: object) => void };
    };
    w.SellioWidget = w.SellioWidget || [];
    if (Array.isArray(w.SellioWidget)) {
      w.SellioWidget.push(["setVisitor", { id, name, email }]);
    } else {
      w.SellioWidget.setVisitor({ id, name, email });
    }
  }, [id, name, email]);

  return null;
}

Verify

Run or deploy the app, open a page, send a test chat, then confirm it appears in your Sellio inbox.

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

PreviousHTML NextReact