What’s in this article
- What Vapi is — The infrastructure for building human-like AI voice agents.
- The Vapi Web Assistant Snippet — Copy-paste code to add a voice agent to your site.
- How to deploy in 10 minutes — A 4-step guide to get your first agent live.
- What this changes for agencies — How voice AI becomes a new, sellable service.
- FAQ — Pricing, models, and how Vapi compares to other tools.
🚀 Plug this into Claude Code or Claude Desktop
This spec contains the copy-paste JavaScript snippet for the Vapi Web Assistant, a 4-step implementation checklist, and a starter prompt for a lead qualification agent.
Want to turn this into a repeatable service for your clients? We workshop those builds in the Talk-to-Build community.
This post gives you the exact code to add an AI voice agent to your website in about ten minutes. You’ll get a copy-pasteable snippet that puts a button on your site, letting visitors talk to an AI to book appointments, ask questions, or qualify themselves as a lead.
This is now the default stack because Amazon Ring just picked this exact platform, Vapi, after testing 40 others for their own inbound calls. They went from zero to production in two weeks. If it’s solid enough for Amazon, it’s solid enough for your clients.
What is Vapi?
Vapi is a developer platform for building, testing, and deploying AI voice agents that can hold human-like conversations. It provides the infrastructure to handle real-time voice streams, connecting large language models (like GPT-4o or Claude 3) to web and telephone interfaces. Vapi manages the complexity of latency, interruption handling, and scaling, allowing builders to focus on the agent’s logic and purpose.
The Vapi Web Assistant Snippet You Can Copy Right Now
This HTML and JavaScript snippet embeds a Vapi voice assistant directly onto any website. You add the script tag to your site’s `
` section and the `<!DOCTYPE html>
<html>
<head>
<title>My Website with a Vapi Agent</title>
<script src="https://unpkg.com/@vapi-ai/web@latest/dist/vapi.umd.js"></script>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>Have a question? Click the button below to talk to our AI assistant.</p>
<!-- This is the Vapi Assistant button -->
<vapi-assistant id="your-assistant-id-goes-here" />
</body>
</html>Once embedded, this code creates a floating button on your page. When a user clicks it, it opens a voice interface and starts a conversation with the specific AI agent you configured in your Vapi account.
BEFORE: Passive Lead Capture User on site --> Fills out form --> Waits for email/call --> Delay AFTER: Active Voice Qualification User on site --> Clicks Vapi button --> AI qualifies lead --> CRM updated
Here’s exactly how I’d add a Vapi agent to a site
The fastest way to deploy a Vapi voice agent is by using their pre-built web assistant on a contact or pricing page. This bypasses complex telephony setup and provides an immediate win. The process involves creating the agent in the Vapi dashboard, configuring its brain, and pasting the provided HTML snippet into your site. It’s a four-step process I’ve run in under 15 minutes.
- Create a Vapi Account. Go to Vapi.ai, sign up, and you’ll land in the dashboard. The first thing you’ll do is create a new project to house your assistants.
- Build Your Assistant. Click “Create Assistant.” This is where you define its personality and purpose. Choose a language model (like GPT-4o for speed), select a voice (they have dozens of realistic options), and write the system prompt that tells the AI its job, e.g., “You are a friendly assistant for a design agency. Your goal is to qualify leads by asking about their budget and timeline.”
- Get Your Snippet. Once you save the assistant, Vapi provides its unique ID. Navigate to the “Web Assistant” section in their docs or dashboard. You’ll find the exact HTML snippet from the section above, with your new assistant’s ID already populated.
- Embed and Test. Copy the two lines of code. Paste the `