Web widget

1
<vapi-widget
2
  public-key="your-public-key"
3
  assistant-id="your-assistant-id"
4
  mode="chat"
5
  theme="dark"
6
  size="full"
7
  radius="large"
8
  base-color="#1a1a1a"
9
  accent-color="#3B82F6"
10
  button-base-color="#000000"
11
  button-accent-color="#FFFFFF"
12
></vapi-widget>

1
<vapi-widget
2
  public-key="your-public-key"
3
  assistant-id="your-assistant-id"
4
  mode="chat"
5
  main-label="Chat with Support"
6
  start-button-text="Start Voice Chat"
7
  end-button-text="End Call"
8
  empty-chat-message="Hi! How can I help you today?"
9
  empty-voice-message="Click to start a voice conversation"
10
></vapi-widget>

1
<script>
2
  document.addEventListener('DOMContentLoaded', function() {
3
    const widget = document.querySelector('vapi-widget');
4
    
5
    // Listen for call events
6
    widget.addEventListener('call-start', function(event) {
7
      console.log('Voice call started');
8
      // Track analytics, update UI, etc.
9
    });
10
    
11
    widget.addEventListener('call-end', function(event) {
12
      console.log('Voice call ended');
13
      // Update UI, save conversation, etc.
14
    });
15
    
16
    widget.addEventListener('message', function(event) {
17
      console.log('Message received:', event.detail);
18
      // Process message, update state, etc.
19
    });
20
    
21
    widget.addEventListener('error', function(event) {
22
      console.error('Widget error:', event.detail);
23
      // Handle errors, show fallback UI, etc.
24
    });
25
  });
26
</script>

1
import { VapiWidget } from '@vapi-ai/client-sdk-react';
2
3
function App() {
4
  const handleCallStart = () => {
5
    console.log('Voice call started');
6
    // Update state, track analytics, etc.
7
  };
8
  
9
  const handleCallEnd = () => {
10
    console.log('Voice call ended');
11
    // Update state, save conversation, etc.
12
  };
13
  
14
  const handleMessage = (message: any) => {
15
    console.log('Message received:', message);
16
    // Process message, update state, etc.
17
  };
18
  
19
  const handleError = (error: Error) => {
20
    console.error('Widget error:', error);
21
    // Handle errors, show fallback UI, etc.
22
  };
23
  
24
  return (
25
    <VapiWidget
26
      publicKey="your-public-key"
27
      assistantId="your-assistant-id"
28
      mode="voice"
29
      onCallStart={handleCallStart}
30
      onCallEnd={handleCallEnd}
31
      onMessage={handleMessage}
32
      onError={handleError}
33
    />
34
  );
35
}

1
<vapi-widget
2
  public-key="your-public-key"
3
  mode="voice"
4
  assistant='{
5
    "model": {
6
      "provider": "openai",
7
      "model": "gpt-4.1-mini",
8
      "messages": [
9
        {
10
          "role": "system",
11
          "content": "You are a helpful customer support agent for TechFlow. Be friendly and helpful."
12
        }
13
      ]
14
    }
15
  }'
16
></vapi-widget>

1
<vapi-widget
2
  public-key="your-public-key"
3
  assistant-id="your-assistant-id"
4
  mode="chat"
5
  assistant-overrides='{
6
    "variableValues": {
7
      "customerName": "John Doe",
8
      "customerTier": "Premium"
9
    }
10
  }'
11
></vapi-widget>

1
<vapi-widget
2
  public-key="your-public-key"
3
  assistant-id="your-assistant-id"
4
  mode="chat"
5
  require-consent="true"
6
  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."
7
  local-storage-key="techflow_widget_consent"
8
></vapi-widget>

1
<vapi-widget
2
  public-key="your-public-key"
3
  assistant-id="your-assistant-id"
4
  mode="chat"
5
  size="compact"
6
  show-transcript="false"
7
></vapi-widget>

1
document.addEventListener('DOMContentLoaded', function() {
2
  const widget = document.querySelector('vapi-widget');
3
  
4
  widget.addEventListener('error', function(event) {
5
    const error = event.detail;
6
    
7
    // Log error for debugging
8
    console.error('Widget error:', error);
9
    
10
    // Show user-friendly message
11
    if (error.message.includes('microphone')) {
12
      alert('Please allow microphone access to use voice features.');
13
    } else if (error.message.includes('network')) {
14
      alert('Connection error. Please check your internet connection.');
15
    } else {
16
      alert('Something went wrong. Please try again.');
17
    }
18
  });
19
});