> ## Documentation Index
> Fetch the complete documentation index at: https://docs.callers.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK overview

> Put a Callers voice and text agent on your website with one script tag, or build your own experience with the JavaScript Web SDK.

The Callers Web SDK lets visitors talk to your agent directly in the browser: by voice or by text, with no phone number and nothing to install. Drop one `<script>` tag on your site for a ready-made call widget, or drive the same engine from your own code and UI.

> [!NOTE]
>
> Web calls (the widget) are enabled per account. Contact [support@callers.ai](mailto:support@callers.ai) to turn them on.

![The Callers call widget showing a transcript with the agent's and the visitor's messages, in light and dark themes](https://mintcdn.com/voxiaai/wqnSuR-gwKpmU86L/images/documentation/sdk/widget-light-dark.png?fit=max\&auto=format\&n=wqnSuR-gwKpmU86L\&q=85\&s=ca8cf9bfd59c8c05888c9cb7e458d3e0)

The call window during a voice call, in the Default Light and Default Dark themes. The visitor can keep typing while they talk.

> **[Quickstart](https://docs.callers.ai/sdk/quickstart.md)**
>
> A working widget in two minutes, a programmatic integration in five.

> **[Open the playground](https://docs.callers.ai/sdk/playground.md)**
>
> Try every option against your own agent, then copy the code.

## What you can build

> **[Voice and text calls](https://docs.callers.ai/sdk/text-and-voice.md)**
>
> One widget handles both. A text conversation can switch to voice mid-call when the visitor turns on their microphone.

> **[Live transcript](https://docs.callers.ai/sdk/events-and-transcript.md)**
>
> Stream every message as it happens, to the built-in window or your own UI.

> **[In-call forms](https://docs.callers.ai/documentation/widget-agents/in-call-forms.md)**
>
> The agent can show forms, step-by-step questions and generated UI that the visitor fills in during the call.

> **[Theming](https://docs.callers.ai/sdk/theming.md)**
>
> Match your brand with a JSON theme, set in the dashboard or in code.

> **[Talking avatars](https://docs.callers.ai/sdk/avatars.md)**
>
> Give the agent a live, lip-synced face that runs in the visitor's browser.

> **[Page Guide](https://docs.callers.ai/sdk/page-guide.md)**
>
> Let the agent see the page and highlight or scroll to what it is talking about.

> **[Bot protection](https://docs.callers.ai/sdk/bot-protection.md)**
>
> Require a Cloudflare Turnstile check before a call can start.

> **[Noise suppression](https://docs.callers.ai/sdk/configuration.md#audio)**
>
> AI noise suppression cleans up the visitor's microphone in the browser, on by default.

## Two ways to integrate

| | Script tag (auto-init) | Programmatic (`WebCall`) |
| - | - | - |
| Setup | Paste one `<script>` tag | Load the SDK and create a `WebCall` in your code |
| Authentication | [Allowed domains](https://docs.callers.ai/sdk/authentication.md#allowed-domains) or a pre-generated token | Usually a [server-generated token](https://docs.callers.ai/sdk/authentication.md#server-generated-tokens) |
| UI | Built-in floating launcher and call window | Built-in widget, embedded widget, or your own UI |
| Control | Configure with `data-*` attributes | Every option, method and callback |
| Best for | Marketing sites, help centers | Logged-in apps, custom UIs, React and mobile WebViews |

Both paths use the same file, `https://cdn.callers.ai/sdk.js`. When the script tag carries `data-agent` (or `data-token`), it creates the widget automatically and exposes it as `window.Callers.widget`. Without those attributes, it only exposes the `CallersWebSdk` global for you to use.

## How it works

<ol />

A web call from click to transcript

1. The SDK asks the Callers API to start a web call for your agent. The API checks that the page's domain is allowed, or that the request carries a valid token, and that bot protection passed if it is enabled.
2. The API returns one-time call credentials, and the SDK connects the visitor's microphone over WebRTC.
3. The transcript streams back to the browser while the call runs. Typed messages and form answers go back to the agent through the API.

Web calls run your agent's normal script, actions, variables and post-call analysis. They appear in the agent's results like any other call.

## Requirements

> **Browser support**
>
> Any current version of Chrome, Edge, Firefox or Safari, on desktop or mobile. The SDK uses WebRTC, the Web Audio API and `EventSource`, which all of these support.

> **HTTPS**
>
> Serve your page over `https://`. Browsers only allow microphone access on secure pages (`http://localhost` is the exception for development). A page opened from a local `file://` path sends no origin and is rejected.

> **Microphone permission**
>
> The browser asks the visitor for microphone access when a call starts. If they decline, the call cannot connect. Inside an `<iframe>`, the frame needs `allow="microphone"`.

> **WebGPU for avatars (optional)**
>
> Talking avatars render in the browser. They use WebGPU when it is available and fall back to WebAssembly on the CPU. If the avatar cannot run at all, the call continues without it. See [Avatars](https://docs.callers.ai/sdk/avatars.md#performance-and-browser-support).

> **Content Security Policy**
>
> If your site sends a CSP header, allow:
>
> * `script-src https://cdn.callers.ai` for the SDK, plus `https://challenges.cloudflare.com` if bot protection is on.
> * `connect-src https://api.callers.ai` and `wss:` for the call connection.
> * `frame-src https://challenges.cloudflare.com` if bot protection is on.
> * For avatars: `https://cdn.callers.ai` (avatar files), `https://cdn.jsdelivr.net` (in-browser runtime) and `https://storage.googleapis.com` (only for avatar backgrounds other than the photo).

## Related

> **[Install the widget from the dashboard](https://docs.callers.ai/documentation/widget-agents/installing-the-widget.md)**
>
> Turn on the widget for an agent, add your domains and copy the snippet.

> **[Style the widget](https://docs.callers.ai/documentation/widget-agents/styling-the-widget.md)**
>
> Build a theme visually in the dashboard.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.