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


Resources

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

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.

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

Welcome

Concepts

Workflows

Learn

Knowledge

Community

Legal

Resources