Skip to main content
The playground is a live test bench for the Web SDK. Enter your agent ID and secret, adjust how the widget looks and behaves, start a real test call, and copy the matching code for your site. No setup or code needed.

Open the playground in a new tab

Recommended for test calls: full screen, and your secret is remembered in that tab’s browser storage.

​
What you can do

1

Agent

Enter your Agent ID and Secret or API key. The secret is the agent’s web call secret from Channels > Widget > Custom, or one of your organization’s API keys. You can leave it empty if the agent’s allowed domains include sdk-playground.callers.dev.
2

Look

Pick an Avatar (None, Maya, John, or By name for a custom one), its Size and Avatar background. Set the Launcher position and offset, and turn on Custom widget theme to edit the launcher, call window, message and form colors. With the theme off, the agent’s dashboard theme is used.
3

Behavior

Choose the Greeting (Agent default, AI first or Caller first), turn Page guide on and pick its Highlight style (a preview plays on the sample site), set the Launcher label, and enter Variables as JSON.
4

Preview and test

Switch the preview between Desktop and Phone, then click Start test call. The Event log and Transcript panels show every callback and message as the call runs.
5

Get code

Get code opens the code for your exact setup in three tabs: Script tag, npm + server token, and setTheme(). Copy it into your site.
Developer opens extra tools: the API endpoint, buttons for each SDK method, the raw events, and diagnostics. Share demo copies a link to the current setup.

​
Secrets stay private

  • Your secret is stored in this browser only, encrypted, and expires after 8 hours. Forget removes it immediately.
  • Share links and generated code never include the secret. The generated server code reads it from an environment variable.
  • A share link can’t redirect calls to a server outside Callers: the playground only uses Callers API endpoints.
The playground signs tokens in the browser for convenience. Never do this on your own site. Sign tokens on your server, as shown in Authentication.

​
Try it

Each link opens the playground with a setup preloaded. Add &agent=YOUR_AGENT_ID to any of them to fill in your agent. The easiest way to build a link is to set things up in the playground and click Share demo.

​
Page Guide demo

A separate Page Guide demo plays highlight and scroll actions against a sample page without placing a call.

Quickstart

Put the widget on your own site.

Configuration

What each option does.