Browser Voice Widget

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

Option A — Shareable link (no code)

Flip shareable on the agent and Voicebip hosts a public “try me” page:

$
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:

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

1
{ "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.

Option B — Embed the Web SDK

For your own page, use the Browser (Web SDK). It handles the WebRTC handshake and mic:

1
<button id="talk">Talk to our agent</button>
2
3
<script type="module">
4
  import { VoicebipCall } from "https://cdn.voicebip.com/web-sdk/v1/voicebip.js";
5
6
  document.getElementById("talk").addEventListener("click", async () => {
7
    const call = new VoicebipCall({ agentId: "agt_…" });   // public, shareable agent
8
    call.on("connected", () => console.log("live"));
9
    call.on("transcript", (t) => console.log(t.role, t.text));
10
    call.on("ended", (e) => console.log("done:", e.disposition));
11
    await call.start();     // prompts for mic, opens WebRTC
12
  });
13
</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 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

Next steps

• Give the browser agent the same brain as your phone line → Inbound support + KB.
• Let it take actions during the web call → Tool-calling.
• Full client API (mute, DTMF, custom UI) → Web SDK.