Chatbot - Design and Customize

Overview

The Design Your Chatbot page lets you create a fully customized chatbot with control over appearance, behavior, personality, and AI settings. This is Step 1 in building your chatbot.

Accessing the Design Page

From Project Page: 1. Go to your Chatbot project 2. Find "Step 1: Build Your Own Chatbot" 3. Click "Design Your Chatbot" button 4. You'll be taken to the design/customization page

First Time Setup:

• If chatbot not configured, defaults are created automatically
• You can modify everything to your preferences

Live Preview

Preview Section:

• Real-time preview of your chatbot on the left side
• Updates automatically as you change settings
• See exactly how it will look to users
• Test the appearance before deployment

Preview Features:

• Shows actual chatbot interface
• Displays current colors and styling
• Demonstrates layout and dimensions
• Interactive preview (can type in it)

Refresh Preview:

• Click "Live Preview" or "Refresh" button
• Updates with latest changes
• No need to save before previewing

System Prompt (Critical Component)

Importance

The System Prompt is the most important setting. It defines:

• Chatbot's role and expertise
• Personality and tone
• Behavior and boundaries
• Response style and format

Writing Your System Prompt

Best Practices:

1. Be Specific About Role

   "You are a customer support specialist for [Company Name], specializing in product questions and technical support."
   

2. Define Tone and Style

   "Communicate in a friendly, professional manner. Use clear, concise language. Be patient and helpful."
   

3. Set Boundaries

   "You can help with product questions, order status, and account issues. For billing questions, direct users to our billing team."
   

4. Include Context

   "We offer three subscription tiers: Personal, Smart, and Professional. You should be familiar with our pricing and features."
   

5. Specify Format

   "When listing features, use bullet points. When explaining processes, use numbered steps. Keep responses under 200 words."
   

System Prompt Examples

Customer Support:

You are a helpful customer support assistant for [Company Name]. Your role is to:

Answer product questions accurately
Help troubleshoot technical issues
Provide order status and shipping information
Guide users through our services


Always be friendly, patient, and professional. If you don't know something, admit it and offer to connect the user with a specialist.

Technical Expert:

You are a technical documentation specialist. Your expertise includes:

API documentation and usage
Code examples and best practices
System architecture explanations
Troubleshooting technical problems


Provide clear, accurate technical information. Use code blocks when helpful. Explain complex concepts in simple terms when possible.

Sales Assistant:

You are a consultative sales assistant for [Company Name]. Your role is to:

Help customers understand our products
Compare different options
Guide users toward the best solution
Answer pricing and feature questions


Be helpful, not pushy. Focus on understanding customer needs and recommending appropriate solutions.

Updating System Prompt

1. Edit Prompt

• Type or edit in the system prompt textarea
• Rich text editor available for formatting
• Can use HTML tags if needed

2. Preview Changes

• Changes reflect in live preview
• Test with sample questions
• Verify behavior matches expectations

3. Save Changes

• Click "Update System Prompt" button
• Changes saved immediately
• Affects all future conversations

Basic Settings

Title

• Display name for your chatbot interface
• Appears in chatbot header
• Example: "Support Bot", "AI Assistant", "Help Center"

Bot Name

• Name the assistant will use
• How it refers to itself in conversations
• Example: "Assistant", "Sarah", "SupportBot"

Custom Greeting

• First message users see
• Sets the tone for interaction
• Can be multiple sentences
• HTML formatting supported

Examples:

• "Hello! I'm here to help you with any questions about our products."
• "Hi there! 👋 How can I assist you today?"
• "Welcome! I'm your AI assistant. What would you like to know?"

Placeholder Text

• Text shown in input field before user types
• Helps guide users
• Examples: "Type your question...", "Ask me anything", "How can I help?"

Theme & Style

Preset Themes

Available Themes:

• Modern Professional
• Casual Friendly
• Clean Minimal
• Bold Creative
• And many more...

Selecting a Theme: 1. Choose theme from dropdown 2. Automatically applies color scheme and styling 3. Customizable after selection 4. Or select "Custom" for full control

Custom Theme

If "Custom" Selected:

• Full control over all appearance settings
• Colors section becomes available
• All styling options enabled

Colors & Appearance

Primary Color

• Main brand color
• Used for headers, buttons, accents
• Click color picker to choose
• Enter hex code directly

Secondary Color

• Complementary color
• Used for backgrounds, borders
• Should complement primary color

Chatbot Background

• Main chat area background
• Usually light color (white, light gray)
• Affects readability

Input Color

• Input field background
• User's message bubble color (sometimes)
• Should contrast with text

Output Color

• Bot's message bubble background
• Usually different from input
• Helps distinguish messages

Border Color

• Border around chatbot window
• Chat bubble borders
• Subtle color recommended

Font Family

• Typography for messages
• Options: Arial, Helvetica, Georgia, Times New Roman, etc.
• Choose readable, professional font

Font Size

• Base text size
• Affects all text in chatbot
• Typical: 14-16px

Line Height

• Spacing between lines
• Affects readability
• Typical: 1.4-1.6

Style Options

Chatbox Style

• Rounded: Soft, curved corners
• Square: Sharp, modern corners
• Minimal: Clean, simple borders

Avatar Style

• Bot avatar appearance
• Circular, rounded square, etc.

Header Style

• Gradient: Color gradient background
• Solid: Single color
• Minimal: Simple, clean header

Shadow Style

• None: No shadow
• Soft: Subtle shadow
• Medium: Moderate shadow
• Strong: Prominent shadow

Border Radius

• Corner roundness
• 0 = square, higher = more rounded
• Typical: 8-15px

Bubble Padding

• Spacing inside message bubbles
• Affects readability and appearance
• Typical: 10-20px

Size & Layout

Width

• Chatbot window width in pixels
• Typical: 350-450px
• Consider mobile viewing
• Responsive on smaller screens

Height

• Chatbot window height in pixels
• Typical: 500-700px
• Balance between space and screen real estate

Message Spacing

• Space between messages
• Typical: 10-20px
• Affects conversation flow

AI Behavior Settings

Tone

Options:

• Friendly: Warm, approachable, conversational
• Professional: Formal, business-like, respectful
• Casual: Relaxed, informal, laid-back
• Technical: Precise, detailed, expert-level
• Humorous: Light-hearted, playful, entertaining

Impact:

• Affects language choice
• Changes response style
• Sets conversation mood

Max Length

• Maximum response length (characters)
• Prevents overly long answers
• Typical: 200-500 characters
• Adjust based on use case

When to Use:

• Short (100-200): Quick Q&A, brief answers
• Medium (200-400): Standard responses
• Long (400+): Detailed explanations

Temperature

Range: 0.0 - 1.0

What It Controls:

• Creativity vs consistency
• Response variety

Settings:

• 0.0-0.3: Very consistent, deterministic
• 0.4-0.7: Balanced (recommended)
• 0.8-1.0: More creative, varied

Recommendations:

• Customer support: 0.3-0.5
• Creative tasks: 0.7-0.9
• Technical: 0.2-0.4

Response Delay

• Delay before bot responds (milliseconds)
• Simulates typing speed
• Typical: 500-2000ms
• Adds natural feel

Max Messages

• Maximum messages in conversation history
• Keeps context manageable
• Typical: 10-50 messages
• Older messages fade out

Message Delay

• Delay between showing messages
• If multiple parts to response

Advanced Features

Enable Memory

• What It Does: Remembers conversation context
• When Enabled: Bot recalls previous messages in conversation
• When Disabled: Each message is independent
• Recommendation: Enable for better conversations

Enable Multilingual

• What It Does: Supports multiple languages
• Automatic Detection: Detects user's language
• Response Language: Bot responds in same language
• Use Case: International audiences

Animation & Interaction

Animation Speed

• Fast: Quick transitions
• Normal: Standard speed (recommended)
• Slow: Deliberate, noticeable animations

Send Button Style

• Button appearance
• Icon, text, or combined
• Matches theme

Typing Indicator

• Shows "typing..." animation
• Adds realism
• Recommended: Enable

Sound Effects

• Audio feedback for messages
• Optional feature
• May be disabled by default

Saving Your Design

Auto-Save

• Some settings save automatically
• Others require explicit save

Save Button

• Click "Save" or "Save Chatbot Design"
• All settings saved
• Returns to project page

Preview Before Save

• Always preview changes first
• Test different settings
• Save when satisfied

Account Type Considerations

All Accounts

• Basic customization available
• System prompts
• Color schemes
• Appearance settings

Smart & Professional

• All customization features
• No restrictions

Premium Chatbot (Smart/Professional Only)

• Advanced styling options
• More theme choices
• Premium deployment options

Tips for Best Results

✅ Start with System Prompt: This is most important - get it right first

✅ Match Your Brand: Use company colors and style

✅ Test Thoroughly: Use preview extensively

✅ Keep It Simple: Don't over-customize initially

✅ Consider Users: Design for your audience

✅ Mobile Friendly: Test on different screen sizes

✅ Professional Appearance: Clean, modern design works best

Troubleshooting

Preview Not Updating?

• Click refresh button
• Save changes first
• Clear browser cache

Colors Not Applying?

• Verify hex codes are valid
• Check theme selection
• Save and refresh

Settings Not Saving?

• Check for validation errors
• Ensure all required fields filled
• Try saving again

Next Steps

After designing your chatbot:

1. Add Intent Responses (Smart/Professional) - Define specific Q&A pairs 2. Upload Documents - Add knowledge base 3. Build Vector Store - Enable RAG 4. Deploy Chatbot - Go live!

Design is the foundation - take time to get it right!