> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.voicebip.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.voicebip.com/_mcp/server.

# Browser Voice Widget

> Put a "Talk to our agent" button on any web page. The visitor speaks to your agent from the browser over WebRTC — no phone number dialled, no app installed.

**What you build:** an in-page voice experience. A visitor clicks a button, grants mic access, and holds a live voice conversation with your agent — audio flows over WebRTC, not the phone network. Great for product demos, in-app help, and letting a prospect try your agent in one click.

```
Web page ─▶ [Talk to our agent] ─▶ WebRTC offer ─▶ Voicebip media
   ▲                                                    │
   └──────────────── live two-way audio ───────────────┘
```

**Who it's for:** developers evaluating the platform (share a link, no SIM needed), SaaS teams embedding voice help, and anyone who wants a zero-friction way to show an agent to a colleague.

## Two ways to do it

| Approach             | Best for                                          | Effort            |
| -------------------- | ------------------------------------------------- | ----------------- |
| **Shareable link**   | Instant demo, no code — Voicebip hosts a try-page | Copy a URL        |
| **Embedded Web SDK** | Your own page/branding, control over the UI       | A few lines of JS |

## Option A — Shareable link (no code)

Flip `shareable` on the agent and Voicebip hosts a public "try me" page:

```bash
curl -X PATCH https://api.voicebip.com/v1/agents/agt_… \
  -H "Authorization: Bearer pk_xxx" -H "Content-Type: application/json" \
  -d '{ "shareable": true }'
```

Fetch the public info (including the link) — this endpoint needs **no API key**, it's meant to be called from the browser:

```bash
curl https://api.voicebip.com/v1/public/try/agt_…/info
```

```json
{ "agent_id": "agt_…", "display_name": "Acme Support", "share_url": "https://try.voicebip.com/agt_…" }
```

Send `share_url` to anyone; they open it and talk to the agent. Under the hood the page posts a WebRTC offer to `POST /v1/public/try/agt_…/offer` and connects the media.

> **Note**
>
> Only agents you've explicitly marked `shareable: true` are reachable this way. Set it back to `false` to revoke the link instantly.

## Option B — Embed the Web SDK

For your own page, use the [Browser (Web SDK)](/integrations/sdks/web). It handles the WebRTC handshake and mic:

```html
<button id="talk">Talk to our agent</button>

<script type="module">
  import { VoicebipCall } from "https://cdn.voicebip.com/web-sdk/v1/voicebip.js";

  document.getElementById("talk").addEventListener("click", async () => {
    const call = new VoicebipCall({ agentId: "agt_…" });   // public, shareable agent
    call.on("connected", () => console.log("live"));
    call.on("transcript", (t) => console.log(t.role, t.text));
    call.on("ended", (e) => console.log("done:", e.disposition));
    await call.start();     // prompts for mic, opens WebRTC
  });
</script>
```

You get lifecycle callbacks (`connected`, `transcript`, `ended`) to drive your own UI — show a live captions panel, a "speaking" indicator, an end button. See the [Web SDK reference](/integrations/sdks/web) for the full event and method list.

## Webhooks still fire

Browser calls behave like any call for your backend: `call.initiated` and `call.completed` are delivered to your workspace webhook (with `channel: "voice"` and a `webrtc: true` flag), so recording, transcripts, and analytics work the same as phone calls.

## Test it (sandbox)

Point the widget at a `pk_test_` shareable agent — the browser handshake runs, and synthetic lifecycle webhooks fire, so you can wire up your UI callbacks and backend handlers without a real media session or any billing.

## Troubleshooting

| Symptom                      | Likely cause                                                                    |
| ---------------------------- | ------------------------------------------------------------------------------- |
| Button does nothing          | Mic permission denied, or the agent isn't `shareable: true`.                    |
| `403` from `/public/try/...` | Agent not shareable, or wrong `agent_id`.                                       |
| No audio but "connected"     | Browser blocked autoplay — start audio inside the click handler (user gesture). |
| Works locally, not in prod   | Page must be served over HTTPS for `getUserMedia`.                              |

## Next steps

* Give the browser agent the same brain as your phone line → [Inbound support + KB](/use-cases/inbound-support-kb).
* Let it take actions during the web call → [Tool-calling](/use-cases/tool-calling).
* Full client API (mute, DTMF, custom UI) → [Web SDK](/integrations/sdks/web).