Web Snippet

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:

HTML Script Tag

React/TypeScript

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

<script>
  var vapiInstance = null;
  const assistant = "<assistant_id>"; // Substitute with your assistant ID
  const apiKey = "<your_public_api_key>"; // Substitute with your Public key from Vapi Dashboard.
  const buttonConfig = {}; // Modify this as required
  (function (d, t) {
    var g = document.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src =
      "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);
    g.onload = function () {
      vapiInstance = window.vapiSDK.run({
        apiKey: apiKey, // mandatory
        assistant: assistant, // mandatory
        config: buttonConfig, // optional
      });
    };
  })(document, "script");
</script>

Custom Styling

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

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

Event Handling

Listen to various events for custom functionality:

import Vapi from '@vapi-ai/web';
function setupAdvancedVoiceWidget(apiKey: string, assistantId: string) {
  const vapi = new Vapi(apiKey);
  // Call lifecycle events
  vapi.on('call-start', () => {
    console.log('Voice conversation started');
    // Track analytics, show notifications, etc.
  });
  vapi.on('call-end', () => {
    console.log('Voice conversation ended');
    // Save conversation data, show feedback form, etc.
  });
  // Real-time conversation events
  vapi.on('speech-start', () => {
    console.log('User started speaking');
  });
  vapi.on('speech-end', () => {
    console.log('User stopped speaking');
  });
  vapi.on('message', (message) => {
    if (message.type === 'transcript') {
      console.log(`${message.role}: ${message.transcript}`);
      // Update UI with real-time transcription
    } else if (message.type === 'function-call') {
      console.log('Function called:', message.functionCall.name);
      // Handle custom function calls
    }
  });
  // Error handling
  vapi.on('error', (error) => {
    console.error('Voice widget error:', error);
    // Show user-friendly error messages
  });
  return {
    start: () => vapi.start(assistantId),
    stop: () => vapi.stop(),
    send: (message: string) => vapi.send({
      type: 'add-message',
      message: {
        role: 'user',
        content: message
      }
    })
  };
}

Integration Examples

E-commerce Support Widget:

const EcommerceSupportWidget = () => {
  return (
    <VapiWidget
      apiKey="your_api_key"
      assistantId="ecommerce_support_assistant_id"
      config={{
        position: 'bottom-right',
        theme: 'ecommerce',
        greeting: 'Hi! Need help with your order?',
        voice: {
          provider: 'playht',
          voiceId: 'jennifer',
        },
      }}
    />
  );
};

Healthcare Appointment Widget:

const HealthcareWidget = () => {
  return (
    <VapiWidget
      apiKey="your_api_key"
      assistantId="healthcare_assistant_id"
      config={{
        position: 'bottom-left',
        theme: 'healthcare',
        greeting: 'Hello! I can help schedule your appointment.',
        voice: {
          provider: 'playht',
          voiceId: 'jennifer',
        },
      }}
    />
  );
};