Install the widget

Any website (HTML, WordPress, PHP, Webflow)

Paste this before </body> on every page. It loads asynchronously and never blocks rendering.

<script async src="https://cdn.svellyo.com/v1/widget.js" data-workspace="ws_xxxxxxxx"></script>

Optional attributes: data-locale="es", data-launcher="hidden" to open it yourself with Svellyo("open").

React and Next.js

npm i @svellyo/sdk

// app/layout.tsx (Next.js) or your root component (React)
import { SvellyoWidget } from "@svellyo/sdk/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SvellyoWidget workspaceId="ws_xxxxxxxx" />
      </body>
    </html>
  );
}

Identify signed-in users

Pass the current user so every conversation shows their name, email and attributes, and their chat history follows them across devices.

<SvellyoWidget
  workspaceId="ws_xxxxxxxx"
  user={session ? { userId: session.user.id, email: session.user.email, name: session.user.name, attributes: { plan: "pro" } } : null}
/>

// Plain JavaScript
Svellyo("identify", { userId: "42", email: "jane@acme.com", name: "Jane Doe", attributes: { plan: "pro" } });
Svellyo("reset"); // on logout

Turn on verified identity in widget settings to require an HMAC hash computed on your server, so nobody can impersonate a user from the browser.

JavaScript API

Svellyo("open");
Svellyo("close");
Svellyo("toggle");
Svellyo("openConversation", "conversation_id");
Svellyo("setAttributes", { plan: "scale", seats: 12 });

Let an AI agent install it

Using Cursor, Claude Code or Copilot? Copy the ready-made prompt from Settings → Installation → AI agent. It includes your workspace id and tells the agent exactly which file to edit.

Hiding the widget on some pages

Keep a single install in your root layout and exclude routes with glob patterns. The widget re-evaluates them on every client-side navigation, so Next.js and React Router apps need no per-page logic.

<SvellyoWidget workspaceId="ws_xxxxxxxx" excludePaths={["/admin/*", "/checkout", "/embed/**"]} />

Script tag installs use data-exclude, and any install can call Svellyo("hide") / Svellyo("show") at runtime.

<script async src="https://cdn.svellyo.com/v1/widget.js" data-workspace="ws_xxxxxxxx" data-exclude="/admin/*,/checkout"></script>

Patterns: /checkout exact, /admin/* everything under /admin, * one segment, ** any depth. You can also set Settings → Widget → Hide on these pages in the dashboard to change this without a redeploy.