Web Widget

Web Widget: Embedding Voice and Chat on Your Site

Overview

The Sulus Web Widget can be embedded on any website as a floating call/chat button with just a few lines of code. There are two main approaches: a simple CDN script tag or a React component.

CDN Script Tag (Quickest Method)

Add this to your HTML page — no build tools required:

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your website content -->

    <!-- Add Sulus Widget -->
    <script src="https://unpkg.com/@sulus-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>

    <sulus-widget
      public-key="your-public-key"
      assistant-id="your-assistant-id"
      mode="voice"
      theme="light"
    ></sulus-widget>
</body>
</html>

React Component

Install the package and use it as a component:

npm install @sulus-ai/client-sdk-react

import { SulusWidget } from '@sulus-ai/client-sdk-react';

function App() {
  return (
    <SulusWidget
      publicKey="your-public-key"
      assistantId="your-assistant-id"
      mode="voice"
      theme="light"
    />
  );
}

Key Configuration Options

Mode — choose between voice or chat:

mode="voice" — floating button that starts a voice call
mode="chat" — floating button that opens a text chat

Appearance — customize to match your site:

Prop	Options	Default
`theme`	`light`, `dark`	`light`
`position`	`bottom-right`, `bottom-left`, `top-right`, `top-left`	`bottom-right`
`size`	`tiny`, `compact`, `full`	`full`
`accent-color`	any hex color	`#14B8A6`
`button-base-color`	any hex color	`#000000`

Example with custom styling:

<sulus-widget
  public-key="your-public-key"
  assistant-id="your-assistant-id"
  mode="voice"
  theme="dark"
  position="bottom-right"
  size="compact"
  accent-color="#3B82F6"
  button-base-color="#000000"
  button-accent-color="#FFFFFF"
  main-label="Talk to Support"
></sulus-widget>

Getting Your Keys

Go to the Sulus dashboard and log in
Click your profile → API Keys → copy your Public API Key
Navigate to Assistants in the sidebar and copy your assistant's ID

Unlike private keys, public keys are safe to expose in your website code.