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


Starter Credits

Enterprise

Quickstart

Dashboard

Community

GitHub

Vapi

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

Learn the core concepts of getting started with Vapi.

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.

Welcome

Get Started

Concepts

Workflows

Learn

Knowledge

Community

Legal

Pricing

5¢/min for Calls

At-Cost for Providers

Bring Your Own Keys

$2/mo for Phone Numbers

Starter Credits

Enterprise

Further Reading

Routing Provider Cost

Estimating Costs

Billing Limits

Billing Examples

Welcome

Get Started

Concepts

Workflows

Learn

Knowledge

Community

Legal

5¢/min for Calls

At-Cost for Providers

Bring Your Own Keys

$2/mo for Phone Numbers

​Starter Credits

​Enterprise

​Further Reading

Routing Provider Cost

Estimating Costs

Billing Limits

Billing Examples

Starter Credits

Enterprise

Further Reading