> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vapi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Insert the Widget Snippet">
    Copy the snippet below and insert it into your website's HTML, ideally before the closing `</body>` tag.

    ```html
    <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>
    ```
  </Step>

  <Step title="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.

    ```javascript
    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?",
    };
    ```
  </Step>

  <Step title="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.

    ```javascript
    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`,
      },
    };
    ```
  </Step>

  <Step title="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.

    ```js
      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)
      });
    ```
  </Step>
</Steps>

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