HomeDocumentation

Chatbot Wizard

The Chatbot Wizard guides you through creating a fully configured AI chatbot in 8 simple steps.

Step 1: Basics (Required)

Configure the fundamental settings for your chatbot:

FieldDescriptionExample
NameDisplay name for your chatbot"Support Assistant"
DescriptionInternal 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:

FieldDescriptionExample
Persona NameThe name your bot introduces itself as"Alex"
RoleThe role your bot plays"Customer Success Manager"
BackgroundContext about your bot's expertise"5 years experience helping customers with technical issues"

A well-defined persona makes conversations feel more natural and helps the AI stay consistent.

Step 3: Tonality

Fine-tune your chatbot's communication style using sliders (1-5 scale):

SettingLow (1)High (5)
FormalityCasual, friendlyFormal, professional
HumorSerious, no jokesPlayful, witty
VerbosityBrief, conciseDetailed, thorough
EmpathyFactual, directWarm, understanding
ProactivityReactive onlySuggests next steps

Step 4: Languages

Configure language support:

  • Primary Language: The main language for responses
  • Supported Languages: Additional languages your bot can understand and respond in

ChatReact supports all 24 EU languages plus many more.

Address Form

Define how the chatbot should address website visitors:

SettingDescriptionExample
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

Colors

SettingDescription
Primary ColorMain accent color (buttons, headers)
Secondary ColorGradient and hover states
Background ColorChat window background
Text ColorMessage text color

Dimensions

  • Border Radius: Rounded corners (0-50px)
  • Widget Width: Chat window width
  • Widget Height: Chat window height

Branding

  • Logo URL: Custom logo in the header
  • Header Title: Text in the widget header
  • Header Subtitle: Secondary text in header
  • Bubble Text: Text displayed next to the chat bubble when closed (leave empty for icon only)

Step 6: Behavior

Configure automated behaviors:

SettingDescription
Welcome MessageFirst message shown when chat opens
Fallback MessageResponse when bot can't answer
Proactive GreetingAutomatically greet visitors
Proactive DelayWait time before greeting (ms)
Auto OpenAutomatically open widget
Auto Open DelayWait time before opening (ms)
Sound EnabledPlay sounds for new messages
Typing IndicatorShow typing animation

Pre-Chat Form

Collect visitor information before the chat begins:

  1. Enable Pre-Chat Form Enabled
  2. Add fields (Name, Email, Phone, Free Text)
  3. Mark required fields as "Required" as needed

Click Translate with AI to automatically translate all field labels and placeholders into all supported languages.

Learning Phase Behavior Mode

During the learning phase, you can determine how the chatbot behaves when uncertain about answers:

ModeDescription
CautiousBot is reserved and actively refers to email handoff when uncertain. Proactively adds uncertainty phrases.
Balanced (Default)Normal responses. Only shows uncertainty when the user questions accuracy.
ConfidentResponds 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.

Step 7: Restrictions & Compliance

Set rules and limitations:

Blacklist Topics

Topics your chatbot should avoid discussing:

  • Competitor products
  • Legal advice
  • Pricing negotiations

Best Practice Compliance

Select industry-standard compliance rules:

  • ✅ GDPR Data Handling
  • ✅ No Medical Advice
  • ✅ No Financial Advice
  • ✅ Professional Language
  • ✅ Escalation Protocol

Core Instructions

Custom rules for your chatbot:

  • "Always recommend scheduling a demo for complex questions"
  • "Never share customer data or internal metrics"
  • "Refer pricing questions to the sales team"

Response Limits

  • Max Response Length: Character limit for responses
  • Human Handoff Trigger: Keywords that trigger live chat escalation

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

Once created, you can:

  1. Add Knowledge - Crawl websites or add FAQs
  2. Test - Use the Preview feature to test conversations
  3. Embed - Add the widget to your website
  4. Iterate - Adjust settings based on feedback

Next Steps