Voice Widget Example 🎧

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.

Steps for Installation

1

Insert the Widget Snippet

Copy the snippet below and insert it into your website’s HTML, ideally before the closing </body> tag.

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

2

Generate Your Assistant

From your Vapi dashboard, create an assistant to get the assistant ID. Alternatively, define an assistant configuration directly in your website’s code as demonstrated in the example below.

const assistant = {
  model: {
    provider: "openai",
    model: "gpt-3.5-turbo",
    systemPrompt:
      "You're a versatile AI assistant named Vapi who is fun to talk with.",
  },
  voice: {
    provider: "11labs",
    voiceId: "paula",
  },
  firstMessage: "Hi, I am Vapi how can I assist you today?",
};

3

Modify the Button

Modify the buttonConfig object to align with your website’s style and branding. Choose between a pill or round button and set colors, positions, and icons.

const buttonConfig = {
  position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
  offset: "40px", // decide how far the button should be from the edge
  width: "50px", // min-width of the button
  height: "50px", // height of the button
  idle: { // button state when the call is not active.
    color: `rgb(93, 254, 202)`, 
    type: "pill", // or "round"
    title: "Have a quick question?", // only required in case of Pill
    subtitle: "Talk with our AI assistant", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
  },
  loading: { // button state when the call is connecting
    color: `rgb(93, 124, 202)`,
    type: "pill", // or "round"
    title: "Connecting...", // only required in case of Pill
    subtitle: "Please wait", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
  },
  active: { // button state when the call is in progress or active.
    color: `rgb(255, 0, 0)`,
    type: "pill", // or "round"
    title: "Call is in progress...", // only required in case of Pill
    subtitle: "End the call.", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
  },
};

4

Add Functionality to Vapi Instance

You can use the vapiInstance returned from the run function in the snippet to further customize the behaviour. For instance, you might want to listen to various EventSource, or even send some messages to the bot programmatically.

  vapiInstance.on('speech-start', () => {
    console.log('Speech has started');
  });

  vapiInstance.on('speech-end', () => {
    console.log('Speech has ended');
  });

  vapiInstance.on('call-start', () => {
    console.log('Call has started');
  });

  vapiInstance.on('call-end', () => {
    console.log('Call has stopped');
  });

  vapiInstance.on('volume-level', (volume) => {
    console.log(`Assistant volume level: ${volume}`);
  });

  // Function calls and transcripts will be sent via messages
  vapiInstance.on('message', (message) => {
    console.log(message);
  });

  vapiInstance.on('error', (e) => {
    console.error(e)
  });

Customization

Modify your assistant’s behavior and the initial message users will see. Refer to the provided examples to customize the assistant’s model, voice, and initial greeting.

UI Customization

For advanced styling, target the exposed CSS and other classes to ensure the widget’s appearance aligns with your website’s design. Here is a list of the classes you can customize:

• .vapi-btn: The primary class for the Vapi button.
• .vapi-btn-is-idle: The class for the Vapi button when the call is disconnected.
• .vapi-btn-is-active: The class for the Vapi button when the call is active.
• .vapi-btn-is-loading: The class for the Vapi button when the call is connecting.
• .vapi-btn-is-speaking: The class for the Vapi button when the bot is speaking.
• .vapi-btn-pill: The class for Vapi button to set pill variant.
• .vapi-btn-round: The class for Vapi button to set round variant.