--- doc_version: "1.0.0" last_updated: "2026-07-14T15:00:57.718Z" title: "How to Use the Bot Playground" description: "Test conversations, customize your widget, debug retrieval quality, and get embed code: all from the ChatbotIQ Bot Playground." keywords: [playground, bot testing, widget designer, debug panel, embed code, ChatbotIQ] --- The Playground is your all-in-one workspace for designing, testing, and deploying your chatbot. It has three tabs: **Design**, **Deploy**, and **MCP**. --- ## Open the Playground Go to **Bots** and click **"Design & Deploy"** on any bot. The Playground opens in full screen. The header includes a **gear icon** (⚙) that opens your bot's settings directly, no need to leave the Playground. --- ## Design tab: test and customize This is the main workspace. You'll see two panels: **Left: Live preview** A real-time preview of your chat widget, shown on top of a background that matches your website. You can: - Chat with your bot to test its answers. - Toggle between **desktop** and **mobile** preview modes. - Open the **Debug panel** at the bottom for technical details about each response. **Right: Widget Designer** All the customization options for your widget's appearance: colors, layout, launcher, typography, and more. Changes appear instantly in the preview. See [Customize Widget Appearance](/how-to/customize-widget-appearance/) for details. --- ## Use the Debug panel The Debug panel is one of the most powerful features in ChatbotIQ. It shows you exactly what happens behind the scenes when your bot answers a question: - **Enhanced query** - the optimized version of the user's question used for searching your content. - **Retrieval metrics** - relevance threshold, number of content matches, and filtered results. - **Relevance ranking** - how results were scored and ordered by relevance. - **Source citations** - the exact content pieces used, with relevance scores for each. - **Token usage** - how many tokens were consumed. - **Response time** - how long the answer took to generate. > **This is your best tool for improving answer quality.** If the bot gives a wrong answer, check the Debug panel to see whether the right content was retrieved. If not, you may need to adjust your [crawling settings](/how-to/configure-crawling-for-your-site/) or [RAG threshold](/how-to/optimize-bot-answers/). --- ## Chat features When chatting with your bot (in the Playground or via the widget), you get: - **Streaming responses** - text appears word by word as the AI generates it. - **Markdown rendering** - responses can include bold text, lists, code blocks with syntax highlighting, links, and images. - **Source citations** - numbered superscript links in the text, with a footer listing the cited pages. - **Suggested questions** - starter prompts that appear when the conversation is empty. - **Copy** - hover over any bot message to copy it. - **Thumbs up / down** - rate each response to provide feedback. --- ## Deploy tab: get the code Switch to the **Deploy** tab to choose a deployment channel. Pick the **Website Widget** tile to copy the embed snippet for your website, or the **Slack** tile to connect your bot to Slack. See [Embed the Widget](/how-to/embed-the-widget/) and [Connect to Slack](/how-to/connect-slack/) for full instructions. --- ## MCP tab: connect AI tools The **MCP** tab lets you expose your bot as an MCP (Model Context Protocol) server. This allows AI coding assistants and other MCP-compatible tools to search your knowledge base directly. See [Connect via MCP](/how-to/set-up-mcp-integration/) for setup instructions. --- ## Related - [Customize Widget Appearance](/how-to/customize-widget-appearance/) - all design options - [Improve Your Bot's Answers](/how-to/optimize-bot-answers/) - use the Debug panel to tune quality - [Bot Settings Reference](/reference/bot-settings/) - every bot setting explained ## Sitemap Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).