Give Your Site a Voice: Build a Conversational Support Agent with ElevenLabs Agents

Updated October 20, 2026: ElevenAgents now bills in call minutes, not shared credits, and the CLI signs in through your browser. The cost section, Step 1, Step 3's config and the widget command are updated against the agents pricing page and the CLI docs. Every plan value, with its source quote, is in our ElevenAgents directory entry.

A text chat widget answers questions the way you asked them: typed. A voice agent answers them the way your users actually talk - out loud, mid-scroll, hands off the keyboard. It is the difference between a support page and a person standing next to it, and the cost of that difference keeps collapsing.

This guide builds the real thing end to end: a conversational support agent that talks to your visitors, answers from your actual documentation, and lives on your site as an embeddable widget. The platform is ElevenLabs Agents, which its docs and pricing page now call ElevenAgents. It bundles the four pieces of a voice conversation into one product - speech recognition, an LLM of your choice, text to speech, and a turn-taking model that knows when to speak and when to listen - plus the dashboard, CLI, and MCP server you use to run it. We covered one-way audio from agent runs in the audio briefs guide; this is the two-way version.

Seven steps, under an hour, each ending in something you can run. No phone required: the web widget is the fastest path, and the same agent plugs into Twilio or a SIP trunk later.

Official Sources#

Step 1: Account, API key, and the agents CLI#

Prerequisites: an ElevenLabs account. The Free ElevenAgents plan includes "15 minutes of calls included" a month, per the agents pricing page, which is enough for short test calls while you build.

Install the CLI, then sign in. Homebrew (macOS) and Scoop (Windows) are the recommended installs and ship a standalone binary; npm and a curl installer work too. elevenlabs auth login opens a browser window to authenticate via OAuth and stores the credentials in your operating system's keyring, falling back to ~/.config/elevenlabs/auth-keyring.json with 0600 permissions where no keyring is available:

npm install -g @elevenlabs/cli   # or: brew install elevenlabs/tap/elevenlabs
elevenlabs auth login

Confirm with elevenlabs auth status - it shows which credential source is in use. If the command is missing after an npm install, your npm bin path is not on $PATH; fix it and rerun. You only need an API key (Settings → API Keys in the dashboard) for CI, where the CLI reads ELEVENLABS_API_KEY instead of logging in.

What you have now: a CLI that can create, push, and pull agents - the backbone of every later step.

Step 2: Create the agent from a template#

The CLI scaffolds agents as code - configuration in files, version-controllable, deployable from CI. Initialize a project, then add your first agent:

elevenlabs agents init
elevenlabs agents add "Docs Support" --template customer-service

The customer-service template exists for exactly this job: professional empathetic prompts, low temperature (0.1) for consistent answers, a 30-minute conversation limit, and evaluation criteria wired up. The other templates cover the spectrum - assistant for a general-purpose bot, voice-only and text-only to force one modality, minimal when you want to write everything yourself.

The init command creates the project structure: agents.json as the central registry, agent_configs/ holding one file per agent, plus tools.json and tests.json.

What you have now: a real agent configuration on disk, in files you can commit.

Step 3: Write the system prompt and first message#

This is where the agent becomes yours. Two fields in the config decide the conversation:

• conversation_config.agent.prompt.prompt - the system prompt, the agent's operating manual.
• conversation_config.agent.first_message - what it says when a visitor opens the widget. It sets the tone of the whole call, so state who the agent is and what it can do.

A prompt that works for a support voice agent, using the same field layout as the quickstart's API example:

{
  "conversation_config": {
    "agent": {
      "first_message": "Hi, this is the Docs Assistant for Acme. I can answer questions about setup, billing, and the API. How can I help?",
      "prompt": {
        "prompt": "You are the support assistant for Acme. Answer questions about setup, billing, and the API using only the knowledge base. If the answer is not in the knowledge base, say so and offer to open a support ticket. Keep answers to two sentences where possible, and never invent pricing or limits."
      }
    }
  }
}

Two details matter. First, the honesty clause: "use only the knowledge base, and say so when it is not there." A voice agent that confabulates pricing sounds authoritative while being wrong, which is worse than silent. Second, the length limit: spoken answers past two sentences lose the listener. The prompting guide covers what else to tune.

Runnable check: edit the file, then run elevenlabs agents push --dry-run to preview the change before it ships.

Step 4: Ground it on your docs with a knowledge base#

Without grounding, the agent answers from general knowledge and your product is exactly the thing it knows least about. The knowledge base fixes that: upload your docs, and the agent answers from them.

Supported formats are the boring ones - PDF, Markdown, text, HTML, Word, EPUB - up to 20MB per file. Small documents (under about 300,000 characters of extracted text) ride in full context, always available on every turn. Everything larger goes through RAG: the document is indexed into embeddings ahead of time, and per question only the relevant passages are retrieved, which keeps large knowledge bases usable and adds roughly 250ms of latency per answer, per the RAG docs.

The fastest path is the dashboard: open your agent, go to the Knowledge Base section, upload your FAQ, getting-started guide, and API reference, and toggle Use RAG on. In the CLI, set the rag block in the pulled config and push:

{
  "conversation_config": {
    "agent": {
      "prompt": {
        "rag": {
          "enabled": true,
          "embedding_model": "e5_mistral_7b_instruct",
          "max_vector_distance": 0.6,
          "max_retrieved_rag_chunks_count": 20
        }
      }
    }
  }
}

RAG limits are per workspace, based on tier: 1MB of indexed documents on Free, 2MB on Starter, 20MB on Creator, 100MB on Pro. Indexing happens automatically when documents are attached with RAG on, and can take a few minutes for larger files.

Runnable check: ask the agent a question whose answer exists only in one of your docs. If it answers from the doc with the right detail, grounding works.

Step 5: Test it like a customer#

The dashboard has a Test AI agent button that opens a live conversation - talk to the agent directly before it ever meets a visitor. Run it through the questions your users actually ask, and crucially, the ones they ask wrong: half-formed sentences, slang, the wrong name for a menu. A support agent is graded on the misspelled query, not the perfect one.

Two dashboard features turn that test into signal:

• Analysis → evaluation criteria. Define what success looks like - for example "the assistant was able to answer all queries or redirect them to a relevant support channel" - and every transcript is graded against it, with a success/failure/unknown result and a rationale. That is your QA loop, automated.
• Data collection. Extract structured data per conversation, like the user's question, so you see what people actually ask rather than what you predicted.

Iterate on the system prompt when the tone is wrong; on the knowledge base when the content is wrong. The evaluation criteria tell you which failure mode you are looking at.

What you have now: a tested agent whose conversations are scored against your own definition of success.

Step 6: Embed the widget on your site#

The widget is the deployment. From the CLI, generate the embed snippet:

elevenlabs agents widget embed <agent_id>

The agent ID is recorded in agents.json when you push, and elevenlabs agents status lists it. The command outputs two lines; paste them into the <body> of your page:

<elevenlabs-convai agent-id="<your-agent-id>"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>

That is the whole integration - no server, no SDK, no build step. The widget defaults to voice-only: visitors talk, the agent talks back. Flip on Voice + text under Channels → Widget → Interface in the dashboard for both modalities, or Chat Mode to start conversations in text. Text modes are worth enabling on day one: voice is the differentiator, but a visitor in a meeting still needs the typed path.

Two security steps before it goes live, both from the widget docs:

1. Widgets require public agents with authentication disabled - check the Advanced tab.
2. Set the Allowlist in the Security tab to your own domains. Without it, anyone can hotlink your widget and spend your call minutes from their own site.

Runnable check: load your page, open the widget, and ask it a question from your docs - then repeat on your phone. Voice agents break in weird places; test the real deployment surface.

Step 7: Run it from your coding agent, and watch the cost#

Two operations patterns complete the loop.

Hosted MCP. ElevenLabs runs a remote MCP server at https://api.elevenlabs.io/v1/mcp that exposes agent management to any MCP client - Claude Desktop connects via Settings → Connectors, other clients use the server URL with OAuth and Streamable HTTP transport. Once connected, your coding agent can create agents, change voices, estimate LLM cost per conversation before committing a change, and generate voice samples. This is the MCP primer applied to ops: you say "make the support agent answer in Spanish for our Latin America launch" and review the proposed config.

CLI in CI. The Step 2 project is the deployable artifact: a pipeline step that sets ELEVENLABS_API_KEY from secrets and runs elevenlabs agents push turns agent changes into pull requests - the same discipline as the cron automation guide.

The cost. The agents pricing page says ElevenAgents plans "are billed by call minutes, not by the shared credit pool." As read on October 20, 2026:

Past the included minutes, an additional call minute costs $0.080, burst pricing (calls above your concurrency limit) is $0.160 a minute, and a text message is $0.003. Those rates come from the plan table, whose rows do not name their plans; the same three rates repeat on every row. LLM usage sits on top: the page's FAQ says "LLM usage is billed separately on top, based on the model you choose," and its cost estimate covers "ElevenAgents platform voice and LLM models" and "Excludes any charges from your own telephony provider." Model choice is the lever you control: pick the smallest LLM that reliably handles the task, per the cost optimization guide. The other plans, with each value's source quote, are in our ElevenAgents directory entry.

What you have now: a voice support agent, grounded on your docs, scored on your criteria, deployed as a widget, and managed as code - built and shipped in under an hour.

FAQ#

How is this different from ElevenLabs text-to-speech?#

The TTS API turns text into audio - one direction, one step. ElevenLabs Agents is a full conversation platform: speech recognition, an LLM of your choice, TTS, and a turn-taking model that handles interruptions and timing. Our audio briefs guide is the one-way version; this build is two-way.

Can the agent answer from my own documentation?#

Yes, that is the point of the knowledge base. Upload PDFs, Markdown, or text files and the agent answers from them, with full-context for small docs and RAG for large ones. If the answer is not in the knowledge base, it says so.

What does a conversation cost?#

ElevenAgents bills call minutes, not shared credits. The Free plan includes 15 minutes of calls a month, Creator is $22 a month (first month $11), and Business is $990 a month with 12,375 minutes. Additional call minutes are $0.080 each, read from the plan table on the agents pricing page, and LLM usage is billed separately on top.

Do I need a phone number?#

No. The widget embeds in any page with two lines of HTML. When you want an actual phone line, the same agent connects to Twilio or a SIP trunk later.

Can my coding agent manage the voice agent?#

Yes. The hosted MCP server exposes agent management to any MCP client, so Claude Code or another client can create agents, change voices, and estimate costs. The CLI also stores agents as code for CI/CD deploys.

Sources#

Some links to tools above are referral links - see our affiliate disclosure.

Last updated: October 20, 2026

Continue Reading#

• Make Your Coding Agent Talk - the one-way version: agent summaries as MP3s with the same platform's TTS
• Best TTS APIs for Developers 2026 - how ElevenLabs stacks up against the text-to-speech alternatives
• OpenAI Realtime Voice API Guide - the other major path to two-way voice, if you are already in the OpenAI stack
• What Is MCP? - the protocol behind the hosted MCP server your coding agent uses to run this agent
• Put an AI Agent on a Cron Job - the scheduling discipline that pairs with agents-as-code deploys
• ElevenAgents in the Voice Agents Directory - every plan, rate and telephony option with its source quote
• Voice AI Agent Platforms Compared - ElevenLabs Agents beside Vapi, Retell, LiveKit, Pipecat and the realtime APIs: prices in each vendor's own unit, telephony and what changed, every value quoted