/* for a grid of videos */

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

.video-grid iframe,
.video-grid a {
  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 */
}

.video-grid a {
  aspect-ratio: 1;
}

@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 */
  }
}

.card-img {
  height: 200px;
  object-fit: contain;
  margin: auto;
  background: white; /*TODO: change color as per theme*/
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  text-align: center;
}

.card-content > h3 {
  margin: 16px 0 8px 0;
  font-size: 1.5em;
  text-align: center;
}

.card-content > p {
  font-size: 1em;
  text-align: center;
}


/* 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,
        });
      },
      modalSettings: {
        onShortcutKeyPressed: () => {
          inkeepSearchModal.render({
            isOpen: true,
          });
        },
        shortcutKey: "k",
      }
    },
  });

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


Join Vapi community

Quickstart

API Reference

Dashboard

Community

GitHub

Vapi

Home

Pricing

Status

Support

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

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

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 📞

Code Resources

Provider Keys

Fine-tuned OpenAI models

Custom LLM

Connecting Your Custom LLM to Vapi: A Comprehensive Guide

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

Quickstart: Setup Elevenlabs Custom Voice

Elevenlabs

PlayHT

Custom Keywords

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

Multilingual

JWT Authentication

The core building-block of voice agents on Vapi.

Additional Capabilities for Your Assistants 

Function Calling

Persistent Assistants

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

Dynamic Variables

At the end of the call, you can summarize and evaluate how it went.

Call Analysis

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

Use Squads to handle complex workflows and tasks.

Squads

Configuring assistants for inbound/outbound calls.

Example

Configuring Inbound and Outbound Calls for Squads

Call Forwarding

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

Ended Reason

Call Ended Reason

You can make SIP calls to Vapi Assistants.

Make & GHL Integration

How to Connect Vapi with Make & GHL

Learn how to create and configure Tools Calling with Vapi.

Tools Calling

Prompting Guide

Useful terms and definitions for Vapi & voice AI applications.

Definitions

Frequently Asked Questions

Appointment Scheduling

Comparisons

Conferences

Demos

GoHighLevel

Guide

Inbound and Outbound

Knowledgebase

Podcast

Snippets & SDKs Tutorials

Special Mentions

Television

Usecase

My Vapi

Expert Directory

How Vapi Integrates Text-to-Speech Platforms?

ElevenLabs

Azure

OpenAI

Neets

Cartesia

IMNT

RimeAI

Deepgram

Groq

DeepInfra

Perplexity

TogetherAI

OpenRouter

Gladia

Talkscriber

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

General

Quickstart

Customization

Core Concepts

Advanced Concepts

Glossary

Community

Providers

Security & Privacy

Support

Join Vapi community

General

Quickstart

Customization

Core Concepts

Advanced Concepts

Glossary

Community

Providers

Security & Privacy

​Join Vapi community

Join Vapi community