VAPI AI Voice Assistant Integration Guide: AI-Powered Solutions

Integrating an AI voice assistant into your website can significantly enhance user engagement and accessibility. Vapi.ai offers a streamlined platform for developers to create and deploy AI-driven voice assistants with ease. In this guide, I’ll walk you through the steps to set up your AI-powered voice assistant using Vapi.ai and integrate it into your website.

Let’s create a sales AI voice bot for an IT company.

Step 1: Sign Up or Log In

• Access the Dashboard: Visit https://dashboard.vapi.ai and sign up for a new account or log in to your existing one.

Step 2: Create a New Assistant

• Navigate to the Assistant Section: After logging in, expand the ‘Platform’ tab from the left-side menu and click on ‘Assistant’.
• Initiate Creation: Click on the ‘Create New Assistant’ button.
• Configure Assistant: Provide a name for your assistant, select the ‘Blank Assistant’ template, and click on the ‘Create Assistant’ button.

Step 3: Model Setup

• Select Language Model: Set the assistant’s model from the model dropdown to GPT-4 to ensure advanced conversational capabilities.

Step 4: Configure First Message

• Set Initial Interaction: Optionally, configure a ‘First Message’ that the assistant will speak to when a conversation begins. This message cannot be interrupted and is guaranteed to be spoken. Here we can add the initial greeting.

Step 5: Define System Prompts

• Establish Assistant’s Role: Set the system prompt to define the assistant’s context, role, personality, and instructions. For an IT company sales agent, you can consider the following example prompt:

You are a voice assistant for [Company Name], a leading IT company specializing in innovative technology solutions.

Your responsibilities include:

1. Introducing Products and Services:

Provide callers with information about our offerings, including:

•   Product 1: CloudSync Pro  

A cloud storage solution that offers seamless data synchronization across multiple devices, ensuring secure and efficient access to files anytime, anywhere.

•    Product 2: SecureNet Defender  

An advanced cybersecurity tool designed to protect businesses from online threats, including malware, phishing attacks, and unauthorized access.

•    Service 1: IT Support and Maintenance  

Comprehensive technical support services, including hardware and software troubleshooting, system updates, and regular maintenance to ensure optimal performance.

•    Service 2: Network Infrastructure Management  

Expert management of network systems, ensuring reliable connectivity, performance optimization, and security across all network components.

2. Guiding to Demo:

If a caller expresses interest in a demo, direct them to our ‘Work’ section on our website, where they can explore case studies and product demonstrations.

3. Encouraging Sales Inquiries:

If the caller is satisfied with the information provided, encourage them to submit a sales inquiry through our online contact form or by providing their contact details for follow-up.

4. Maintaining Professionalism:

Uphold a professional yet approachable tone throughout the conversation.

5. Providing Concise Responses:

Keep responses brief and relevant to the caller’s inquiries.

6. Steering Conversations Appropriately:

If the conversation deviates from sales-related topics, gently redirect it back to our products and services.

7. Concluding Conversations:

Politely end the conversation once the caller’s needs have been addressed, ensuring they have all the necessary information to proceed.

Step 6: Voice Setup

• Configure Text-to-Speech (TTS): Use the ‘Cartesia’ provider and select any professional voice to align with your brand’s persona.

Step 7: Additional Settings and Publishing

• Adjust Call Timeout Settings:
  Navigate to the ‘Advanced’ tab and, under ‘Call Timeout Settings’, you will find the below options.
  • Silence Timeout: Determine how long the system waits before automatically ending a call due to inactivity. Configure this setting based on your requirements.
  • Maximum Duration: Set the maximum length for a call. For demonstration purposes, you can set it to 600 seconds.

• Enable End Call Function:
  
  • Navigate to the ‘Functions’ tab and, under ‘Predefined Functions’, enable the ‘End Call Function’.
  • This feature allows the assistant to conclude the call if the user is satisfied or if the conversation goes off-topic.
  • Note: This function works best with GPT-4 or more advanced models.
• Publish the Assistant: Once configured, click the ‘Publish’ button.

Step 8: Integration into Your Website

• Obtain Assistant ID and Public Key:
  
  • Assistant ID: In the ‘Assistant’ tab, select your newly created assistant and copy the Assistant ID from the top.
  • Public Key: Click on the tab available below the ‘profile’ tab in the left sidebar, select ‘API Keys’, and copy the public key.

• Insert Integration Snippet:
  

Copy the following script and paste it on your web page, replacing <assistant_id> and <your_public_api_key> with your actual Assistant ID and Public Key:

<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>Code language: HTML, XML (xml)

• Customize Button Styling:
  

Modify the buttonConfig object to align with your website’s branding.

For example:

const buttonConfig = {

  position: "bottom-right",

  offset: "40px",

  width: "50px",

  height: "50px",

  idle: {

    color: `rgb(93, 254, 202)`,

    type: "pill",

    title: "Need IT assistance?",

    subtitle: "Talk with our AI sales agent",

    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,

  },

  loading: {

    color: `rgb(93, 124, 202)`,

    type: "pill",

    title: "Connecting...",

    subtitle: "Please wait",

    icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,

  },

  active: {

    color: `rgb(255, 0, 0)`,

    type: "pill",

    title: "Call in progress...",

    subtitle: "End the call",

    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,

  },

};Code language: JavaScript (javascript)

• Advanced Styling:

For further customization, target the following CSS classes:

• .vapi-btn: Primary class for the Vapi button.
• .vapi-btn-is-idle: Button state 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.

Conclusion

Integrating an AI voice assistant into your business ecosystem is a transformative step toward enhancing customer experience and operational efficiency. By leveraging cutting-edge AI technology, businesses can provide personalized, real-time assistance to their customers, ensuring smoother interactions and quicker resolutions.

Voice assistants simplify complex processes, such as answering FAQs, guiding users through products and services, scheduling demos, and managing inquiries. They also reduce the workload on human teams, enabling them to focus on strategic and high-value tasks.

The ease of integration and scalability offered by modern AI platforms ensures that even businesses with minimal technical resources can adopt this AI-driven technology seamlessly. With options for customization, AI voicebot can also reflect your brand’s identity, providing a professional yet approachable interface for your customers.

As customer expectations continue to evolve, integrating a VAPI AI voice assistant not only improves engagement but also demonstrates a commitment to innovation and customer satisfaction. It’s a strategic investment in the future of your business, paving the way for more meaningful and efficient customer interactions.

Consult with our AI  voice assistant development experts and take your business to the next level. Whether you are looking to integrate a VAPI AI voice assistant, set up an AI-driven voice assistant, or explore AI-based voice assistant solutions, we are here to guide you every step of the way.

Author's Bio: