Web Widget Advanced Styling & Consent Options

Overview

The Web Widget page covers the basics of embedding a floating call/chat button on your site. This page covers the deeper styling surface — border radius, background color, full text customization — plus the consent and behavioral props (show-transcript, require-consent, terms-content, local-storage-key) that page doesn't cover.

Two appearance props round out the styling surface beyond what's covered on the main Web Widget page:

These props let you override every user-facing label and placeholder message:

Combining theme, size, radius, colors, and labels into a single configured widget:

<sulus-widget
  public-key="your-public-key"
  assistant-id="your-assistant-id"
  mode="chat"
  theme="dark"
  size="full"
  radius="large"
  base-color="#1a1a1a"
  accent-color="#3B82F6"
  button-base-color="#000000"
  button-accent-color="#FFFFFF"
  main-label="Chat with Support"
  start-button-text="Start Voice Chat"
  end-button-text="End Call"
  empty-chat-message="Hi! How can I help you today?"
  empty-voice-message="Click to start a voice conversation"
></sulus-widget>

In the React component, prop names switch to camelCase. You can also wrap the widget in a styled container and pass custom inline styles for the button and panel:

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

const widgetContainerStyle = {
  position: 'fixed',
  bottom: '24px',
  right: '24px',
  zIndex: 1000,
};

const buttonStyle = {
  borderRadius: '16px',
  backgroundColor: '#1a1a1a',
};

function App() {
  return (
    <div style={widgetContainerStyle}>
      <SulusWidget
        publicKey="your-public-key"
        assistantId="your-assistant-id"
        mode="chat"
        theme="dark"
        radius="large"
        baseColor="#1a1a1a"
        mainLabel="Chat with Support"
        style={buttonStyle}
      />
    </div>
  );
}

These props gate the widget behind a consent form and control transcript visibility — useful for compliance requirements:

Example with consent enabled:

<sulus-widget
  public-key="your-public-key"
  assistant-id="your-assistant-id"
  mode="chat"
  require-consent="true"
  terms-content="By using this chat widget, you agree to our privacy policy and terms of service. Your conversations may be recorded for quality assurance."
  local-storage-key="my_app_widget_consent"
></sulus-widget>

For the basics of embedding the widget — the CDN script tag, the React component, getting your public key and assistant ID, and browser support — see the Web Widget page. This page is specifically the deeper styling and consent surface it doesn't cover.