/* for a grid of videos */

.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between videos */
}

.video-grid iframe {
  flex: 0 0 calc(50% - 20px); /* Flex grow is 0, basis is 50% minus the gap */
  aspect-ratio: 560 / 315; /* Maintain the aspect ratio of 16:9 */
  max-width: calc(50% - 20px); /* Max width is also set to 50% minus the gap */
  height: auto; /* Allow height to auto adjust based on aspect ratio */
}

@media (max-width: 600px) {
  .video-grid iframe {
    flex: 0 0 100%; /* Flex grow is 0, basis is 100% */
    max-width: 100%; /* Allow max-width to be full width on mobile */
  }
}


/* for a header video */

.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


"use client";

// Get the Mintlify search containers, going to reuse them as the triggers for Inkeep
const searchButtonContainerIds = [
  "search-bar-entry",
  "search-bar-entry-mobile",
];

// Clone and replace, needed to remove existing event listeners
const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
  const originalElement = document.getElementById(id);
  const clonedElement = originalElement.cloneNode(true);

  originalElement.parentNode.replaceChild(clonedElement, originalElement);

  return clonedElement;
});

// Load the Inkeep script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@0.2.265/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  // Customization settings
  const sharedConfig = {
    baseSettings: {
      apiKey: "a58574ddc0e41c75990d1c0e890ad3c8725dc9e7c8ee3d3e",
      integrationId: "clthv1rgg000sdjil26l2vg03",
      organizationId: "org_SGvQFUfKzrYkf8z8",
      primaryBrandColor: "#5DFECA",
    },
    aiChatSettings: {
      chatSubjectName: "Vapi",
      botAvatarSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/vapi-botAvatarSrcUrl-1709929183314.png",
      botAvatarDarkSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/vapi-botAvatarDarkSrcUrl-1709929110474.png",
      getHelpCallToActions: [
        {
          name: "Contact Us",
          url: "mailto:support@vapi.ai",
          icon: {
            builtIn: "IoMail",
          },
        },
      ],
      quickQuestions: [
        "What voices are supported?",
        "What languages are supported?",
        "How do I connect a custom LLM?",
        "How do I fetch the prompt dynamically?",
      ],
    },
  };

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // add the "Ask AI" pill chat button
  Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: sharedConfig,
  });

  // instantiate Inkeep "custom trigger" component
  const inkeepSearchModal = Inkeep({
    ...sharedConfig.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
    },
  });

  // When the Mintlify search bar clone is clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach((trigger) => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });
});


Quickstart

API Reference

Dashboard

Community

GitHub

Vapi

Home

Pricing

Status

Support

Code Resources

Vapi is the Voice AI platform for developers.

Introduction

The three core components to Vapi's voice AI pipeline.

Core Models

All the fancy stuff Vapi does on top of the core models.

Orchestration Models

Learn how to create and integrate custom knowledge bases into your voice AI assistants.

Knowledge Base

Creating Custom Knowledge Bases for Your Voice AI Assistants

Overview

Pricing Overview

Learn more about how your Vapi account is billed for provider expenses.

Cost Routing

Billing Limits

Get information on your voice pipeline's projected costs.

Estimating Costs

End-to-end examples estimating voice workflow cost on Vapi.

Billing Examples

Vapi Enterprise

On-Prem Deployments

Learn how to ensure privacy when using Vapi's voice assistant platform.

HIPAA Compliance

SOC-2 Compliance

We are open to all kinds of help inquiry, feedback and feature request, help inquiry.

Quickstart handling inbound calls with Vapi.

Inbound Calling

Quickstart sending outbound calls with Vapi.

Outbound Calling

Web Calling

Client SDKs

Integrate Vapi into your web application.

Web SDK

Easily integrate the Vapi Voice Widget into your website for enhanced user interaction.

Web Snippet

Let's build an outbound sales agent that can schedule appointments.

Outbound Sales

Outbound Sales Example 📞

Let's build a technical support assistant that remembers where we left off.

Inbound Support

Inbound Support Example ⚙️

Let's build a pizza ordering assistant for our website.

Pizza Website

Pizza Website Example 🍕

Some sample code for placing an outbound call using Python

Python Outbound Snippet

Outbound Calls from Python 📞

The core building-block of voice agents on Vapi.

Provider Keys

Additional Capabilities for Your Assistants 

Function Calling

Use Custom Voice with your favourite provider instead of the preset ones.

Custom Voice

Custom LLM

Persistent Assistants

Vapi makes it easy to personalize an assistant's messages and prompts using variables, allowing each call to be customized.

Dynamic Variables

Vapi SDK lets you silently update the chat history through efficient text message integration. This is particularly useful for background tasks or discreetly logging user interactions.

Background Messages

Background Messaging

Learn how to set up your server to receive and respond to messages from Vapi.

Server URLs

Learn about where you can set server URLs to handle call events.

Setting Server URLs

Learn about different events that can be sent to a Server URL.

Server Events

Learn how to receive server events in your local development environment.

Developing Locally

Learn how to create and configure phone numbers with Vapi.

Phone Calling

Call Forwarding

A guide to understanding all call "Ended Reason" types & errors.

Ended Reason

Call Ended Reason

Learn how to set up and test multilingual support in Vapi.

Make & GHL Integration

How to Connect Vapi with GHL

Connecting Your Custom LLM to Vapi: A Comprehensive Guide

Learn how to create and configure Tools Calling with Vapi.

Tools Calling

Prompting Guide

Useful terms and definitions for Vapi & voice AI applications.

Vapi AI Ecosystem
Real-time SDKs	Web · Flutter · React Native · iOS · Python · Vanilla
Client Examples	Next.js · React · Flutter · React Native
Server Examples	Vercel · Cloudflare · Supabase · Node · Bun · Deno · Flask · Laravel · Go · Rust
Resources	Official Docs · API Reference
Community	Videos

General

Get Started

Core Concepts

Learn

Glossary

Community

Legal

Code Resources