API Docs

AI Support Widget

Add AI-powered chat and voice support to your website in minutes. Customize the look and feel, configure AI behavior, and embed with a single script tag.

Appearance

Theme
Accent Color

Chat Widget

Voice Widget

Embed Code

<!-- 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>

Add this code to your website's 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();