> ## 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. # Playground > Try the Callers Web SDK against your own agent in the browser: avatars, themes, Page Guide and launcher options, then copy the code. 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](https://sdk-playground.callers.dev/)** > > Recommended for test calls: full screen, and your secret is remembered in that tab's browser storage. [Callers Web SDK playground](https://sdk-playground.callers.dev/) ## 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](https://docs.callers.ai/sdk/methods.md), 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. > [!WARNING] > > 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](https://docs.callers.ai/sdk/authentication.md). ## 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. | Try | Link | | - | - | | Maya, expanded | [`?avatar=maya&layout=expanded`](https://sdk-playground.callers.dev/?avatar=maya\&layout=expanded) | | John, minimized | [`?avatar=john&layout=minimized`](https://sdk-playground.callers.dev/?avatar=john\&layout=minimized) | | Avatar on a clinic scene | [`?avatar=maya&bg=preset:clinic`](https://sdk-playground.callers.dev/?avatar=maya\&bg=preset%3Aclinic) | | Blurred avatar background | [`?avatar=john&bg=blur`](https://sdk-playground.callers.dev/?avatar=john\&bg=blur) | | Avatar on a brand color | [`?avatar=maya&bg=color&bgColor=#0b1f3a`](https://sdk-playground.callers.dev/?avatar=maya\&bg=color\&bgColor=%230b1f3a) | | Page Guide on | [`?pageGuide=true`](https://sdk-playground.callers.dev/?pageGuide=true) | | Labeled launcher, bottom left | [`?fab=Talk to us&corner=bottom-left&offset=32`](https://sdk-playground.callers.dev/?fab=Talk%20to%20us\&corner=bottom-left\&offset=32) | | Visitor speaks first | [`?greeting=false`](https://sdk-playground.callers.dev/?greeting=false) | | Pass variables | [`?vars={"name":"Jane"}`](https://sdk-playground.callers.dev/?vars=%7B%22name%22%3A%22Jane%22%7D) | | Dark widget theme | [`?theme={"enabled":true,"base":"dark","values":{}}`](https://sdk-playground.callers.dev/?theme=%7B%22enabled%22%3Atrue%2C%22base%22%3A%22dark%22%2C%22values%22%3A%7B%7D%7D) | ### Link parameters | Parameter | Values | | - | - | | `agent` | Agent ID | | `avatar` | `maya`, `john`, `none`, or a custom avatar name | | `avatarUrl` | Packaged avatar folder URL | | `layout` | `expanded` or `minimized` (default `compact`) | | `bg` | `blur`, `transparent`, `preset:`, `color` or `image` (default the photo) | | `bgColor` | Hex color, with `bg=color` | | `bgImage` | Image URL, with `bg=image` | | `greeting` | `true` (agent first) or `false` (visitor first) | | `pageGuide` | `true` | | `fab` | Launcher label | | `corner` | `bottom-right`, `bottom-left`, `top-right`, `top-left` | | `offset` | 0–200 px | | `vars` | URL-encoded JSON object | | `theme` | URL-encoded playground theme state, as produced by **Share demo** | | `api` | Callers API endpoint (only Callers domains are accepted) | 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](https://sdk-playground.callers.dev/page-guide) plays highlight and scroll actions against a sample page without placing a call. ## Related > **[Quickstart](https://docs.callers.ai/sdk/quickstart.md)** > > Put the widget on your own site. > **[Configuration](https://docs.callers.ai/sdk/configuration.md)** > > What each option does. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.