Web calls

A phone number isn’t the only way to reach an agent. With web calls, a visitor presses a button on your site and is talking to your flow over WebRTC a second later — no dial pad, no telephony charge, and a live transcript you can render next to the button. The browser SDK handles the media and signalling; you bring the UI.

How it works

The key point: the browser never holds your API key. A publishable key (pk_live_…) is safe in page source. It is bound to one flow, valid only from origins you allowlist, and rate-limited per key, per visitor session and per IP. Talkif exchanges it for a short-lived session token; everything after that is scoped to that one session.

Packages

Both are headless — no UI ships with them. Source: Talkif-ai/webrtc-js (MIT).

npm install @talkif/webrtc @talkif/webrtc-react

Two modes

const config = {
  baseUrl: "https://api.talkif.ai",
  publishableKey: "pk_live_…",
};

Setting up a public widget

import { useTalkifCall } from "@talkif/webrtc-react";
const config = { baseUrl: "https://api.talkif.ai", publishableKey: "pk_live_…" };
export function CallButton() {
  const { state, durationSecs, muted, start, hangup, toggleMute } = useTalkifCall({
    config,
    onTranscript: ({ role, content }) => console.log(role, content),
    onEnded: (reason) => console.log("ended", reason),
    onError: (error) => console.error(error.code, error.message),
  });
  if (state === "connected") {
    return (
      <>
        <span>{durationSecs}s</span>
        <button onClick={toggleMute}>{muted ? "Unmute" : "Mute"}</button>
        <button onClick={hangup}>Hang up</button>
      </>
    );
  }
  return (
    <button onClick={() => start({})} disabled={state === "requesting" || state === "connecting"}>
      Call us
    </button>
  );
}

import { TalkifCall } from "@talkif/webrtc";
const call = new TalkifCall(config);
call.on("connected", ({ callId }) => console.log("live", callId));
call.on("transcript", ({ role, content }) => console.log(role, content));
call.on("ended", ({ reason }) => console.log("ended", reason));
await call.start({}); // flowId is implied by the key in public mode
// later: call.setMuted(true); call.hangup();

If the flow’s bot gate is on, the SDK completes a Cloudflare Turnstile challenge invisibly — nothing to set up. To supply your own token, pass turnstileToken: () => Promise<string> in the config.

What you can render live

Every call event arrives on the SDK instance (and as hook callbacks), so a page can show more than a spinner:

The core also handles what you’d otherwise get wrong: relay-only ICE with fast first-candidate connect, the data-channel keepalive, a reconnecting events WebSocket with server-side replay after a gap, a liveness check before tearing down a silent call, and deterministic release of the microphone and peer connection on hangup, error or unmount. One active call per hook; starting another disposes the first.

Limits that protect you

An unauthenticated endpoint that spends your money needs guardrails. These apply to every public call, in this order:

A public call is billed like any other call minus telephony — STT, LLM, TTS and infrastructure — and appears in history with providerType: webrtc.

Next