AssistantsExamples

Web Snippet

Easily integrate the Vapi Voice Widget into your website for enhanced user interaction.

Improve your website’s user interaction with the Vapi Voice Widget. This robust tool enables your visitors to engage with a voice assistant for support and interaction, offering a smooth and contemporary way to connect with your services.

Quick Implementation

Choose your preferred implementation method:

The fastest way to get started. Copy this snippet into your website:

1<script>
2  var vapiInstance = null;
3  const assistant = "<assistant_id>"; // Substitute with your assistant ID
4  const apiKey = "<your_public_api_key>"; // Substitute with your Public key from Vapi Dashboard.
5  const buttonConfig = {}; // Modify this as required
6
7  (function (d, t) {
8    var g = document.createElement(t),
9      s = d.getElementsByTagName(t)[0];
10    g.src =
11      "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
12    g.defer = true;
13    g.async = true;
14    s.parentNode.insertBefore(g, s);
15
16    g.onload = function () {
17      vapiInstance = window.vapiSDK.run({
18        apiKey: apiKey, // mandatory
19        assistant: assistant, // mandatory
20        config: buttonConfig, // optional
21      });
22    };
23  })(document, "script");
24</script>

Custom Styling

You can customize the widget appearance by modifying the styles in the React component:

1// Custom button styles
2const customButtonStyle = {
3  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
4  borderRadius: '25px',
5  padding: '12px 30px',
6  fontSize: '14px',
7  fontWeight: '600',
8  boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
9};
10
11// Custom panel styles  
12const customPanelStyle = {
13  background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
14  borderRadius: '16px',
15  border: '2px solid #e1e8ed',
16  backdropFilter: 'blur(10px)',
17};

Event Handling

Listen to various events for custom functionality:

1import Vapi from '@vapi-ai/web';
2
3function setupAdvancedVoiceWidget(apiKey: string, assistantId: string) {
4  const vapi = new Vapi(apiKey);
5
6  // Call lifecycle events
7  vapi.on('call-start', () => {
8    console.log('Voice conversation started');
9    // Track analytics, show notifications, etc.
10  });
11
12  vapi.on('call-end', () => {
13    console.log('Voice conversation ended');
14    // Save conversation data, show feedback form, etc.
15  });
16
17  // Real-time conversation events
18  vapi.on('speech-start', () => {
19    console.log('User started speaking');
20  });
21
22  vapi.on('speech-end', () => {
23    console.log('User stopped speaking');
24  });
25
26  vapi.on('message', (message) => {
27    if (message.type === 'transcript') {
28      console.log(`${message.role}: ${message.transcript}`);
29      // Update UI with real-time transcription
30    } else if (message.type === 'function-call') {
31      console.log('Function called:', message.functionCall.name);
32      // Handle custom function calls
33    }
34  });
35
36  // Error handling
37  vapi.on('error', (error) => {
38    console.error('Voice widget error:', error);
39    // Show user-friendly error messages
40  });
41
42  return {
43    start: () => vapi.start(assistantId),
44    stop: () => vapi.stop(),
45    send: (message: string) => vapi.send({
46      type: 'add-message',
47      message: {
48        role: 'user',
49        content: message
50      }
51    })
52  };
53}

Integration Examples

E-commerce Support Widget:

1const EcommerceSupportWidget = () => {
2  return (
3    <VapiWidget
4      apiKey="your_api_key"
5      assistantId="ecommerce_support_assistant_id"
6      config={{
7        position: 'bottom-right',
8        theme: 'ecommerce',
9        greeting: 'Hi! Need help with your order?',
10        voice: {
11          provider: 'playht',
12          voice_id: 'jennifer',
13        },
14      }}
15    />
16  );
17};

Healthcare Appointment Widget:

1const HealthcareWidget = () => {
2  return (
3    <VapiWidget
4      apiKey="your_api_key"
5      assistantId="healthcare_assistant_id"
6      config={{
7        position: 'bottom-left',
8        theme: 'healthcare',
9        greeting: 'Hello! I can help schedule your appointment.',
10        voice: {
11          provider: 'playht',
12          voice_id: 'jennifer',
13        },
14      }}
15    />
16  );
17};