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

.video-grid iframe {
  flex: 1 0 calc(50% - 20px); /* Adjust width considering the gap */
  aspect-ratio: 560 / 315; /* Maintain the aspect ratio of 16:9 */
  max-width: 560px; /* Max width of the video */
  height: auto; /* Allow height to auto adjust based on aspect ratio */
}

@media (max-width: 600px) {
  .video-grid iframe {
    flex: 1 0 100%; /* On smaller screens, videos take full width */
    max-width: 100%; /* Allow max-width to be full width on mobile */
  }
}


"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,
      });
    });
  });
});


List Phone Numbers

This is the assistant that will be used for incoming calls to this phone number.

If this is not set, then the phone number will not handle incoming calls.

This is the ISO 8601 date-time string of when the phone number was created.

This is the credential that will be used to handle this phone number.

This is for numbers not bought on Vapi.

This is the unique identifier for the phone number.

This is the name of the phone number. This is just for your own reference.

These are the digits of the phone number.

This is the unique identifier for the org that this phone number belongs to.

This is the server URL that will be used to handle this phone number.

All requests will be sent with the call object among other things relevant to that message. You can find more details in the Server URL documentation.

This overrides the serverUrl set on the org. Order of precedence: function.serverUrl > assistant.serverUrl > phoneNumber.serverUrl > org.serverUrl.

This is the secret you can set that Vapi will send with every request to your server. Will be sent as a header called x-vapi-secret.

Same precendence logic as serverUrl.

This is the subscription's current period start.

This is the subscription for the phone number.

This is the Twilio Account SID for the phone number.

This is for numbers not bought on Vapi.

This is the Twilio Auth Token for the phone number.

This is for numbers not bought on Vapi.

This is the ISO 8601 date-time string of when the phone number was last updated.

bearer

Vapi

Learn the core concepts of getting started with Vapi.

Quickstart

bolt

gauge

discord

github

Dashboard

Community

GitHub

API Reference

Home

Pricing

Status

Support

Vapi is the Voice AI platform for developers.

Introduction

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

Frequently Asked Questions

Resources

Vapi is an end-to-end platform for building voice assistants: API, Dasboard, and and fully Customizable.

Assistants

Learn how to create and configure phone numbers with Vapi.

Phone Numbers

Client SDKs

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

Server URL

Set up your Server URL

Provider Keys

Custom LLMs

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

Custom Voice

Additional Capabilities for Your Assistants 

Call Functions

Persistent Assistants

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 🍕

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.

Silent Text Messages

Silent Text Messages Logging

Some sample code for placing an outbound call using Python

Python Outbound Calls

Outbound Calls from Python 📞

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

Calls

Assistants

Phone Numbers

List Phone Numbers

Authorizations

Query Parameters

Response