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.

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.

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
25</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.

1const assistant = {
2  model: {
3    provider: "openai",
4    model: "gpt-3.5-turbo",
5    systemPrompt:
6      "You're a versatile AI assistant named Vapi who is fun to talk with.",
7  },
8  voice: {
9    provider: "11labs",
10    voiceId: "paula",
11  },
12  firstMessage: "Hi, I am Vapi how can I assist you today?",
13};
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.

1const buttonConfig = {
2  position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
3  offset: "40px", // decide how far the button should be from the edge
4  width: "50px", // min-width of the button
5  height: "50px", // height of the button
6  idle: { // button state when the call is not active.
7    color: `rgb(93, 254, 202)`, 
8    type: "pill", // or "round"
9    title: "Have a quick question?", // only required in case of Pill
10    subtitle: "Talk with our AI assistant", // only required in case of pill
11    icon: `https://unpkg.com/[email protected]/icons/phone.svg`,
12  },
13  loading: { // button state when the call is connecting
14    color: `rgb(93, 124, 202)`,
15    type: "pill", // or "round"
16    title: "Connecting...", // only required in case of Pill
17    subtitle: "Please wait", // only required in case of pill
18    icon: `https://unpkg.com/[email protected]/icons/loader-2.svg`,
19  },
20  active: { // button state when the call is in progress or active.
21    color: `rgb(255, 0, 0)`,
22    type: "pill", // or "round"
23    title: "Call is in progress...", // only required in case of Pill
24    subtitle: "End the call.", // only required in case of pill
25    icon: `https://unpkg.com/[email protected]/icons/phone-off.svg`,
26  },
27};
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.

1  vapiInstance.on('speech-start', () => {
2    console.log('Speech has started');
3  });
4
5  vapiInstance.on('speech-end', () => {
6    console.log('Speech has ended');
7  });
8
9  vapiInstance.on('call-start', () => {
10    console.log('Call has started');
11  });
12
13  vapiInstance.on('call-end', () => {
14    console.log('Call has stopped');
15  });
16
17  vapiInstance.on('volume-level', (volume) => {
18    console.log(`Assistant volume level: ${volume}`);
19  });
20
21  // Function calls and transcripts will be sent via messages
22  vapiInstance.on('message', (message) => {
23    console.log(message);
24  });
25
26  vapiInstance.on('error', (e) => {
27    console.error(e)
28  });

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.