Widget Playground
Test your chat widget and AI assistant in a live sandbox before deploying to your website.
Test before you go live
The Widget Playground (at Conversations > Messaging > Widget Playground) is a live preview environment where you can interact with your chat widget and AI assistant exactly as a real visitor would — without it being on your actual website.
Use it to:
- Test your AI assistant's responses before going live
- Verify that your widget looks correct with your branding
- Preview different launcher styles (floating circle vs. docked bars)
- Check that your playbooks are working as expected
- Train new team members on what the customer experience looks like
How it works
The Widget Playground loads a full, functional version of your chat widget in a sandboxed page. Conversations you start here are real conversations — they go through your actual AI assistant, follow your actual playbooks, and appear in your Conversations inbox.
The only difference is that they're clearly labeled as "Playground" conversations so you can distinguish them from real customer conversations.
Starting a test conversation
- Go to Conversations > Messaging > Widget Playground.
- The widget will load in the preview pane on the right.
- Click the chat button to open the widget.
- Type a message to start a conversation.
Your AI assistant will respond just as it would for a real customer. You'll even see an animated typing indicator while the AI is generating its response, giving you a true feel for the customer experience. You can test any scenario — ask questions, trigger playbooks, test escalation paths, and so on.
Customizing the preview
The left panel of the Widget Playground lets you tweak the widget's appearance and behavior on the fly to see how it looks before you commit to those settings:
- Assistant — Choose which AI assistant to test.
- Launcher Style — Preview the floating circle or docked bar styles.
- Launcher Content — See how icon-only, text-only, or icon+text looks on the closed launcher.
- Widget Color — Test different primary colors.
- Position — See how the widget looks in the bottom-right vs. bottom-left corner.
When you find a combination you like, you can copy the generated embed code directly from the playground.
What to test
Before going live with a new assistant or playbook, we recommend testing:
- Common questions — Does the AI answer your most frequent questions correctly?
- Edge cases — What happens when someone asks something outside the AI's knowledge? Does it handle it gracefully?
- Playbook triggers — Do your playbooks start correctly when the right conditions are met?
- Escalation — Does the AI hand off to a human when it should?
- Branding — Does the widget look right? Are the colors, logo, and greeting message correct?
Try to "break" your AI assistant in the playground before your customers do. Ask it confusing questions, give it incomplete information, and try to steer it off-topic. The more edge cases you find in testing, the better your customers' experience will be.
Training mode slash commands
If your assistant has Training mode (web chat) enabled, you can type special slash commands directly in the widget to control the session:
| Command | What it does |
|---|---|
/clear | Fully resets the widget session — wipes the stored contact (name and email), conversation, draft, and session tracking, then restarts name/email collection from scratch. This does not send any message to the AI. |
/flag-good | Marks the current conversation as a good training example |
/flag-bad | Marks the current conversation as a bad training example |
Use /clear when you want to simulate a brand-new visitor starting fresh — for example, to test your name/email collection flow again without refreshing the browser.
Resetting the playground
If you want to start fresh (for example, to test a different scenario from the beginning), click Reset Conversation to clear the current thread and start a new one. This is equivalent to typing /clear in the widget when training mode is active.