Chatbot Wizard
The Chatbot Wizard guides you through creating a fully configured AI chatbot in 8 simple steps.
Only Step 1 (Basics) and Step 8 (Summary) are required — every other step has a Skip button. From Step 5 (Widget Design) onward, a live preview of your widget is shown next to the form.
Step 1: Basics (Required)
Starting from a Template
At the top of Step 1 you can choose a template that pre-fills the wizard with optimized settings — persona, tonality, welcome and fallback messages, and behavior options. You can still adjust everything in the following steps.
| Template | Best For |
|---|---|
| Blank | Start from scratch |
| Support | Customer service & help desk |
| Sales | Lead generation & sales |
| Onboarding | Guide new users & customers |
| Corporate | Professional & formal tone |
The Blank template is always available. The pre-configured templates are available on paid plans — the wizard shows which plan unlocks them.
Name & Description
Configure the fundamental settings for your chatbot:
| Field | Description | Example |
|---|---|---|
| Name | Display name for your chatbot | "Support Assistant" |
| Description | Internal description for your team | "Handles customer inquiries for our SaaS product" |
The chatbot name is shown to visitors in the chat widget header.
Step 2: Persona
Define your chatbot's personality and background:
| Field | Description | Example |
|---|---|---|
| Use Persona Name | Toggle whether the bot introduces itself by name | On/Off |
| Persona Name | The name your bot introduces itself as (if enabled) | "Alex" |
| Role | The role your bot plays | "Customer Success Manager" |
| Background | Context about your bot's expertise | "5 years experience helping customers with technical issues" |
Anonymous Mode
If you disable Use Persona Name, the chatbot will not introduce itself with a name. Instead of "Hello! I'm Alex, your customer service specialist." it will simply say "Hello! How can I help you?". The persona name field is hidden when this toggle is off.
A well-defined persona makes conversations feel more natural and helps the AI stay consistent. Use anonymous mode if you prefer a more neutral chatbot experience.
Communication Style
Choose a predefined communication style that sets the overall tone for your chatbot:
| Style | Best For |
|---|---|
| Professional & Modern (Default) | Agencies, tech companies, B2B |
| Exclusive & Distinguished | Beauty clinics, law firms, luxury hotels |
| Warm & Welcoming | Family businesses, restaurants, medical practices |
| Cool & Casual | Tattoo studios, trendy bistros, startups |
| Custom | Uses your own Core Instructions instead of a preset |
Each style adds detailed prompt instructions with appropriate tone, phrasing patterns, and examples.
Step 3: Tonality
Fine-tune your chatbot's communication style using sliders (1-5 scale):
| Setting | Low (1) | High (5) |
|---|---|---|
| Formality | Casual, friendly | Formal, professional |
| Humor | Serious, no jokes | Playful, witty |
| Verbosity | Brief, concise | Detailed, thorough |
| Empathy | Factual, direct | Warm, understanding |
| Proactivity | Reactive only | Suggests next steps |
Step 4: Languages
Configure language support:
- Primary Language: The main language for responses (choose from English, German, French, Spanish, Italian, or Portuguese)
- Supported Languages: Additional languages your bot can understand and respond in
- Technical Level: A slider from Simple to Technical that determines how technical the bot's language should be
ChatReact supports all 24 official EU languages.
Address Form
Define how the chatbot should address website visitors:
| Setting | Description | Example |
|---|---|---|
| Formal (Sie/Vous) | Polite form for professional/business communication | "How may I assist you?" (German: "Wie kann ich Ihnen helfen?") |
| Informal (Du/Tu) | Personal address for casual communication | "How can I help you?" (German: "Wie kann ich dir helfen?") |
The address form is only used in languages that have a formal/informal distinction (e.g., German, French, Spanish). In English and similar languages, this setting does not apply.
The widget automatically detects the visitor's browser language and responds in the appropriate language.
Step 5: Widget Design
Customize the appearance of your chat widget:
Position
- Bottom Right (default)
- Bottom Left
- Inline (Embedded) — Widget is displayed where the embed script is placed, always open, no bubble, no close button. Ideal for dedicated chat pages or support sections.
Colors
Pick a Color Theme:
| Theme | Description |
|---|---|
| Default | The standard ChatReact color scheme |
| Company | Uses your company's brand colors (available once they are set in Company Settings) |
| Custom | Unlocks individual color pickers |
When Custom is selected, you can adjust:
| Setting | Description |
|---|---|
| Primary Color | Main accent color (buttons, headers) |
| Secondary Color | Gradient and hover states |
| Background Color | Chat window background |
| Text Color | Message text color |
Advanced Color Settings
Expand the advanced options for more granular control:
| Setting | Description |
|---|---|
| Visitor Messages | Background and text color of the visitor's message bubbles |
| Bot Messages | Background and text color of the bot's message bubbles |
| Header Text Color | Text color in the widget header |
Each advanced color can be reset to automatic, in which case ChatReact picks a contrast-safe color for you.
Dimensions
- Border Radius: Rounded corners (0-32px)
- Widget Width: Chat window width
- Widget Height: Chat window height
Branding
- Use Company Logo: Show your company logo in the widget header. Requires the Professional plan or higher; the logo itself is uploaded in Company Settings.
- Header Title: Text in the widget header
- Header Subtitle: Secondary text in the header. If you leave it unset, the widget shows a localized default subtitle. After creation, you can hide the subtitle entirely by clearing this field in the widget settings.
Every design option can be changed after creation, and additional settings (such as a custom logo URL and the chat bubble text) are available there too. See Widget Customization for the full reference.
Step 6: Behavior
Configure automated behaviors:
| Setting | Description |
|---|---|
| Welcome Message | First message shown when chat opens |
| Fallback Message | Response when bot can't answer |
| Proactive Greeting | Automatically greet visitors |
| Proactive Delay | Wait time before greeting (1-10 seconds) |
| Auto Open | Automatically open widget |
| Auto Open Delay | Wait time before opening (1-15 seconds) |
| Sound Enabled | Play a notification sound when the bot responds |
| Typing Indicator | Show typing animation |
Pre-Chat Form
Collect visitor information before the chat begins:
- Enable Pre-Chat Form
- Add fields (Text, Email, Phone, Textarea)
- Mark required fields as "Required" as needed
After creation, you can click Translate with AI in the chatbot's behavior settings to automatically translate all field labels and placeholders into your supported languages.
Learning Phase
Skip Learning Phase: Turn this on to start your chatbot with full confidence from day one — no cautious responses. A warning reminds you to make sure your knowledge base is well-prepared before going live.
If the learning phase is active, you can determine how the chatbot behaves when uncertain about answers:
| Mode | Description |
|---|---|
| Cautious | Bot is reserved and actively refers to email handoff when uncertain. Proactively adds uncertainty phrases. |
| Balanced (Default, marked "Recommended") | Normal responses. Only shows uncertainty when the user questions accuracy. |
| Confident | Responds as in normal operation. The learning phase only collects feedback without changing response behavior. |
Additional Learning Phase Instruction: Optional free text for special instructions during the learning phase, e.g., "Always refer pricing questions to the team."
The learning phase mode is also configurable in chatbot settings after creation.
Live Chat
Let visitors talk to human support agents in real time (requires the Professional plan or higher):
- Turn on Enable Live Chat
- Choose a Live Chat Mode:
| Mode | Description |
|---|---|
| Handoff Only | The AI bot handles conversations and hands off to humans when needed |
| Standalone | Direct human chat, separate from the AI bot |
| Both | AI bot with handoff plus standalone human chat |
Learn more in the Live Chat guide.
On white-label plans, Step 6 also shows a Branding section with a toggle to show or hide the "Powered by ChatReact" badge in the widget.
Step 7: Restrictions & Compliance
Set rules and limitations:
Blocked Topics
Topics your chatbot should avoid discussing:
- Competitor products
- Legal advice
- Pricing negotiations
Best Practice Compliance
Select from eight industry-standard compliance rules:
- No legal advice — recommends consulting a legal professional (pre-selected)
- No binding commitments — never makes binding commitments about pricing, discounts, or delivery (pre-selected)
- Refer to human support — offers to connect with human support for sensitive or complex issues (pre-selected)
- No internal information — does not disclose internal company information or confidential details
- No competitor information — does not share information about competitors or make comparisons
- No medical advice — recommends consulting a healthcare professional
- No financial advice — never provides financial or investment advice
- Data privacy — handles personal data carefully and doesn't ask for unnecessary information
Core Instructions
Custom rules for your chatbot, managed as a list:
- Add, edit, or delete individual instructions
- Activate or deactivate each instruction without deleting it
- Click Improve with AI to have your instructions automatically refined
Example instructions:
- "Always recommend scheduling a demo for complex questions"
- "Never share customer data or internal metrics"
- "Refer pricing questions to the sales team"
Core Instructions have the highest priority and are always included in every chat response.
After creation, the Core Instructions editor in the chatbot settings supports text formatting and clickable links (web, email, and phone numbers).
Response Limits & Handoff
- Max Response Length: Character limit for responses (100-2000 characters)
- Human Handoff Trigger: Describe in your own words when the bot should hand the chat off to a human, e.g., "For product complaints or refund requests"
- Human Handoff Email: Email address the bot directs visitors to when handing off to a human
Step 8: Summary (Required)
Review all settings before creating your chatbot:
- Verify all configurations
- Preview the widget design
- Click Create Chatbot to finish
After Creation
When you click Create Chatbot, you're taken directly into the Set up your knowledge base wizard, which fills your chatbot's knowledge base in three quick steps:
- Scan website — Enter your website URL; ChatReact discovers pages automatically and lets you select which ones to import
- Upload documents — Add PDF, DOCX, TXT, MD, CSV, or JSON files
- Done — Continue to your dashboard
Both content steps can be skipped — you can always add knowledge later. See the Knowledge Base guide for details.
From there you can:
- Test - Use the Preview feature to test conversations
- Embed - Add the widget to your website
- Iterate - Adjust settings based on feedback