Install the widget

Your workspace id starts with ws_. Find it under Settings → Installation in your dashboard.

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.

Need help? Open your dashboard and chat with us from the widget.