Developer Docs
Platform guideSign in

Widget

Support widget

Chat and voice support on your own site, configured here and embedded with one script tag. Everything below previews live.

Appearance

Theme
Accent Color

Chat Widget

Voice Widget

Embed Code

index.html
<!-- Vocalis Widget -->
<script src="https://cdn.vocalis.ai/widget/v1.js"></script>
<script>
  VocalisWidget.init({
    apiKey: 'your_api_key',
    theme: 'light',
    accentColor: 'slate',
    chat: {
      enabled: true,
      title: 'Support',
      subtitle: 'Usually replies instantly',
      placeholder: 'Type a message...',
      systemPrompt: 'You are a helpful customer support assistant. Be concise and friendly.'
    },
    voice: {
      enabled: true,
      greeting: 'Hi! I\'m here to help. How can I assist you today?',
      systemPrompt: 'You are a friendly voice assistant. Keep responses brief - aim for 1-2 sentences.'
    }
  });
</script>

Goes in your HTML, just before the closing </body> tag.

Live Preview

Chat with Support

SDK reference

Installation

Add the widget to your website with a single script tag. No build step required.

<script src="https://cdn.vocalis.ai/widget/v1.js"></script>

React / Next.js

Use our React package for better integration with React-based applications.

npm install @vocalis/widget-react


import { VocalisWidget } from '@vocalis/widget-react';


<VocalisWidget apiKey="your_key" />

Event Handling

Listen to widget events like message sent, call started, or conversation ended.

VocalisWidget.on('message', (data) => {
  console.log('New message:', data);
});


VocalisWidget.on('callStarted', () => {
  console.log('Voice call started');
});

Programmatic Control

Open, close, or send messages programmatically.

// Open the widget
VocalisWidget.open();


// Send a message
VocalisWidget.sendMessage('Hello!');


// Start a voice call
VocalisWidget.startCall();