> ## Documentation Index > Fetch the complete documentation index at: https://wiredesk.ai/docs/llms.txt > Use this file to discover all available pages before exploring further. # Playground and chat bubble appearance > Try the agent live and change how the chat bubble looks: every option in the Playground, with its default and range. The Playground is one page for changing the agent and trying it. On the left are the settings; on the right is a live preview of the chat panel, drawn from your unsaved changes as you type. Open it from **Agents → your agent → Playground**, or the **Test chat** button at the top of any agent page. Saved changes go live on your site without touching the embed snippet. Owners and admins can save changes. ## Try the agent The preview on the right is the same panel your visitors get. * **Real replies:** when the chat channel is on, the preview talks to your saved agent. Test chats are real conversations: they show up in **Conversations** and count as usage. With chat off, replies in the preview are canned. * **Save before you test:** the preview answers from the saved agent. After editing the agent's name, greeting or instructions, click **Save changes**, then ask again. Saving changes to the agent starts a fresh test conversation, so the next answer comes from the version you saved. * **Reset** throws away the test conversation and starts over. * **Full page** opens the chat on its own page in a new tab. * **Voice:** when the phone channel is on, a **Chat** / **Voice** switch appears above the preview. **Voice** starts a real call with the saved agent in your browser. See [choose a voice](/docs/channels/voice). When you have unsaved changes, a bar at the bottom says "You have unsaved changes." with **Discard** and **Save changes**. Switching tabs keeps your edits. ## Agent tab The basics of how the agent talks, edited next to the preview. | Setting | What it does | | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | **Agent name** | What the agent calls itself. | | **Greeting** | How every conversation opens, on every channel. The chat bubble can say something different under **Content**. | | **Instructions** | About your business and how to behave. **Draft instructions** expands a few rough lines into a full draft. | | **Answer from your website & documents** | Lets the agent search your [knowledge](/docs/knowledge/overview). | | **Remember things per visitor across conversations** | Keeps notes per visitor. See [remember callers](/docs/persona/remember-callers). | These are the same settings as **How it talks**; see [instructions](/docs/persona/instructions). Below them are shortcuts to **Knowledge**, **Actions** and **Channels**. ## Content tab What the panel says. | Setting | Default | Notes | | ----------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Icon** | None | **Use website icon** takes your site's favicon, or **Upload** your own image under 80 KB (PNG, JPEG, GIF, WebP, SVG or ICO). **Remove** clears it. | | **Header name** | The agent's name | Up to 60 characters. | | **Tagline** | Empty | Shown under the name before the conversation starts. Up to 120 characters. | | **Opening message** | The agent's greeting | The first bubble a visitor sees. Leave empty to use the greeting. Line breaks, `**bold**` and `- bullets` render. Up to 500 characters. | | **Input placeholder** | "Type a message…" | Up to 80 characters. | | **Suggested questions** | None | One-tap questions shown until the visitor says something. Up to five. Click **Add question** to add one. | | **Suggest follow-ups** | Off | After each reply, the agent offers two or three short next questions as buttons. When it has just asked the visitor something, they are the likely answers instead ("Yes, please"). They are written in the conversation's language, only for things the agent can answer, and skipped while it is collecting details or a person has been asked for. A tapped one is billed like a typed message. | | **Answer ratings** | Off | Thumbs up and down under each of the agent's replies. A visitor can change or take back their rating. In **Conversations**, filter by **Thumbs down** to find the answers that missed, and open one to see which reply was rated. | | **Voice typing** | On | A mic in the message box. The visitor speaks, the words appear in the box, and they send it like a typed message, so it costs the same as a typed reply. It uses the browser's own speech-to-text, so it only shows in browsers that have it: Chrome, Edge and Safari, not Firefox. | | **Footer note** | Empty | Small print under the message box. Up to 140 characters. | ## Style tab How the panel looks. | Setting | Default | Options | | -------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | | **Theme** | Light | Light or dark. | | **Accent colour** | `#111111` | Any hex colour. Used for the visitor's messages. | | **Accent the header** | Off | Fills the header with the accent colour. | | **Accent the send button** | On | Fills the send button with the accent colour. | | **Typeface** | Figtree | System, Inter, Geist, Figtree, Nunito, Roboto, Open Sans, Lato, Poppins, Montserrat, Arial, Helvetica, Georgia, Times New Roman. | | **Text size** | 16px | 12, 13, 14, 15, 16, 17, 18 or 20px. Everything in the panel scales with it. | | **Corners** | Medium | None (0px), small (6px), medium (12px) or large (20px). | Text on an accent-coloured header, and on the launcher, switches between white and near-black automatically so it stays readable on whatever colour you pick. Keep text at 16px or above if many visitors are on phones. Below 16px, iPhones zoom the page when someone taps the message box. ## Launcher tab The button that opens the chat, and where the panel sits. | Setting | Default | Range and notes | | -------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- | | **Bubble colour** | `#111111` | Any hex colour. | | **Label** | Empty | Text on the launcher, like "Chat with us". Leave empty for a round bubble. Up to 40 characters. | | **Panel size** | Standard | Compact (360 × 560px), standard (375 × 725px) or tall (400 × 800px). | | **Side of the page** | Right | Left or right. | | **Open by itself after** | 0 seconds | 0–120 seconds. 0 leaves it closed until clicked. It opens by itself once per browser tab. | | **Distance from the edge** | 24 × 24px | From the side, then from the bottom. 0–200px each. Raise it to clear a cookie bar or a sticky footer. | | **Full screen on phones** | On | On screens under 480px wide, the open panel fills the screen. Off keeps it a floating card, which is cramped at that size. | | **Hide on phones** | Off | No launcher at all on screens under 480px wide. | | **Stacking order** | 2147483000 | 0–2147483647. Lower it so an overlay of your own, such as a cookie banner or checkout, sits on top of the widget. | ## Save and publish Click **Save changes**. When the look or wording of the bubble changed, you'll see "Saved — live on your site within a minute." Visitors get the new look on their next page load; there's nothing to change in the snippet. If the bubble is still on its defaults, the page says so under the settings. ## Different settings on one page Everything here applies wherever the widget is installed. To change the side, colour, label, offsets, stacking order, mobile behaviour or auto-open on a single page, override it on the script tag or in `window.wiredeskSettings`. See [widget settings](/docs/developers/widget-settings). ## Related * [Install the widget](/docs/widget/install) * [Website chat](/docs/channels/website-chat) * [Widget settings reference](/docs/developers/widget-settings) * [Test your agent](/docs/agents/test-your-agent)