Skip to main content

​
Overview

The Playground is your testing environment for fine-tuning your agent’s behavior before deploying it to your website. Here you can modify the system prompt, select from pre-built templates, and see how your agent responds to questions in real-time.
Always test your agent in the Playground before deploying. It’s the fastest way to ensure your agent behaves as expected and provides accurate responses.

​
Accessing the Playground

Navigate to the Playground by selecting your agent from the sidebar and clicking on Playground in the agent menu. The Playground opens with a split-view layout:
PanelPurpose
Left PanelConfiguration controls for prompt editing and embed code
Right PanelLive chat widget preview for testing

​
System Prompt (Instructions)

The system prompt, also called “Instructions,” defines how your agent behaves, responds, and interacts with users. It’s the core configuration that shapes your agent’s personality and capabilities.

​
What the System Prompt Controls

Your system prompt influences:
  • Personality: Friendly, professional, technical, casual
  • Knowledge boundaries: What topics the agent should or shouldn’t discuss
  • Response format: Length, structure, use of bullet points or paragraphs
  • Greeting behavior: How the agent welcomes users
  • Escalation rules: When to suggest contacting human support
  • Language and tone: Formal vs informal communication style

​
Editing the Prompt

The Playground provides a text editor for modifying your agent’s system prompt:
  1. Locate the Instructions (System prompt) section in the left panel
  2. Edit the text directly in the textarea
  3. Click Save to apply your changes
Changes are not saved automatically. You’ll see the Save button enabled when you have unsaved modifications. A confirmation dialog will appear if you try to navigate away with unsaved changes.

​
Fullscreen Editor

For longer prompts or more comfortable editing, use the fullscreen editor:
  1. Click the Open in Editor button below the textarea
  2. Edit your prompt in the expanded modal view
  3. Click Apply Changes to return to the main view
  4. Click Save to persist your changes
The fullscreen editor provides more space and is particularly useful for complex system prompts with multiple sections.

​
Prompt Templates

Templates provide pre-configured system prompts optimized for common use cases. They’re a great starting point that you can use as-is or customize further.

​
Template Categories

The template selector organizes prompts into three groups:
CategoryDescription
Base InstructionsThe default system prompt recommended for most use cases. Provides balanced, helpful responses.
TemplatesPre-built prompts optimized for specific scenarios (customer support, sales, technical help, etc.)
Custom promptYour own custom instructions, either written from scratch or modified from a template

​
Using Templates

1

Open Template Selector

Click the dropdown menu in the Instructions section to view available templates.
2

Select a Template

Choose a template from the list. The prompt textarea will immediately update with the selected template’s content.
3

Customize (Optional)

Modify the template text to fit your specific needs. The selector will automatically switch to “Custom prompt” once you make changes.
4

Save Changes

Click Save to apply the new instructions to your agent.

​
Reset to Default

If you’ve made changes and want to start fresh, click the reset button (circular arrow icon) next to the template selector. This restores the Base Instructions template.
Resetting to default will replace your current instructions. Make sure to copy any custom text you want to preserve before resetting.

​
Template Auto-Detection

The Playground intelligently detects when your instructions match a known template:
  • If your text exactly matches a template, that template is shown as selected
  • If you modify any character, the selector switches to “Custom prompt”
  • Selecting “Custom prompt” restores your previously saved instructions

​
Live Widget Preview

The right panel displays a fully functional preview of your chat widget. This is the same widget your website visitors will see.

​
Testing Your Agent

Use the preview to test your agent’s responses:
  1. Type a question in the chat input
  2. Send the message to see how your agent responds
  3. Evaluate the response quality and accuracy
  4. Adjust the system prompt if needed
  5. Repeat until satisfied with the results
Test with a variety of questions that your actual users might ask. Include edge cases and questions that might be outside your agent’s intended scope to see how it handles them.

​
What to Test

Test CategoryExample Questions
Core knowledgeQuestions your agent should definitely answer from your sources
Edge casesAmbiguous or unusual questions
Out of scopeTopics your agent shouldn’t discuss
Conversation flowMulti-turn conversations with follow-up questions
Tone and personalityCheck that responses match your desired communication style

​
Embed Code

The Playground provides the embed code snippet you’ll use to add the chat widget to your website.

​
Getting the Embed Code

The embed code section displays two script tags: 
<script src="https://your-widget-url/embed.js"></script>
<script>humanizing.init("YOUR_PUBLIC_KEY");</script>

​
Copying to Clipboard

  1. Locate the Embed Code section at the bottom of the left panel
  2. Click the copy button (clipboard icon) in the top-right corner of the code block
  3. The code is copied to your clipboard, ready to paste into your website
The embed code includes your agent’s unique public key. This key identifies your specific agent and loads its configuration.

​
Where to Add the Code

Add the embed code to your website’s HTML, typically in one of these locations:
LocationBest For
Before </body>Most websites - ensures page loads first
Before </head>Sites that need widget available immediately
Through tag managerSites using Google Tag Manager or similar
For detailed deployment instructions, see the Deployment guide.

​
Saving Changes

The Playground tracks all modifications to your agent’s configuration.

​
Save Button States

StateAppearanceMeaning
DisabledGrayed outNo changes to save
EnabledActiveUnsaved changes exist
Saving”Saving…” textSave in progress
Saved”Saved” textChanges successfully saved

​
Unsaved Changes Warning

If you try to navigate away with unsaved changes:
  1. A confirmation dialog appears
  2. Choose Leave without saving to discard changes
  3. Choose Save and leave to save first, then navigate
  4. Choose Cancel to stay on the page
Get into the habit of saving after each meaningful change. This way you can test incrementally and know exactly which change affected the agent’s behavior.

​
Best Practices

Begin with the Base Instructions or a relevant template. They’re already optimized for common use cases and provide a solid foundation.
Make one change at a time and test before making additional modifications. This helps you understand exactly what effect each change has.
Maintain a list of questions to test after each change. Include your most common customer questions and known edge cases.
Vague instructions lead to inconsistent responses. Instead of “be helpful,” specify “provide step-by-step instructions when explaining how to do something.”
Explicitly tell your agent what topics to avoid and when to suggest contacting human support. This prevents inappropriate responses.
Remind your agent in the system prompt that it should answer from the provided knowledge base. This improves accuracy and reduces hallucination.

​
Example System Prompts

​
Customer Support Agent

You are a friendly customer support assistant for [Company Name].

Your role:
- Answer questions about our products and services
- Help customers troubleshoot common issues
- Guide users to relevant documentation

Guidelines:
- Always be polite and patient
- If you don't know the answer, say so and suggest contacting support@company.com
- Keep responses concise but thorough
- Use bullet points for step-by-step instructions

Never:
- Make promises about refunds or compensation
- Share internal company information
- Discuss competitors

​
Technical Documentation Assistant

You are a technical documentation assistant for [Product Name].

Your expertise:
- API documentation and usage examples
- Configuration and setup guides
- Troubleshooting common errors

Communication style:
- Use technical terminology appropriate for developers
- Provide code examples when relevant
- Be precise and accurate

When users ask about features not in the documentation:
- Clearly state that the feature isn't documented
- Suggest they check the changelog or contact the dev team

​
Sales Pre-Qualification Agent

You are a sales assistant for [Company Name].

Your goals:
- Answer questions about our products and pricing
- Help visitors understand which solution fits their needs
- Qualify leads by understanding their requirements

Guidelines:
- Be enthusiastic but not pushy
- Ask clarifying questions to understand needs
- Highlight relevant features based on their use case

For pricing questions:
- Provide general pricing tiers if available
- Encourage scheduling a demo for detailed quotes
- Offer to connect them with a sales representative

​
Troubleshooting

The preview widget may use cached responses. Try:
  1. Refresh the page
  2. Clear the conversation in the widget
  3. Ask a completely new question
The Save button only enables when changes are detected. Ensure you’ve actually modified the text, not just clicked in the textarea.
If templates don’t appear in the selector:
  1. Refresh the page
  2. Check your internet connection
  3. Contact support if the issue persists
If responses are inaccurate:
  1. Check that your knowledge base contains the relevant information
  2. Review your system prompt for conflicting instructions
  3. Try being more specific in your prompt about response accuracy
  4. Add relevant Q&A sources for common questions

​
Next Steps

Add Knowledge Sources

Expand your agent’s knowledge by adding more web pages, text, and Q&A content.

Customize Appearance

Match your agent’s visual style to your brand with colors, backgrounds, and widget settings.

Deploy to Website

Learn how to embed your agent on your live website.

View Conversations

Monitor how users interact with your deployed agent.