How to Customize Chatbot Design

Make your chatbot match your brand by customizing its appearance, including colors, avatar, welcome messages, and more.

Prerequisites

• An existing chatbot (see Set Up Your First Chatbot)
• Your brand colors (hex codes like #3B82F6)
• Optional: A logo or avatar image

Steps

Step 1: Open the Design Tab

1. Go to Chatbots in the sidebar
2. Click on your chatbot to open it
3. Click the Design tab

Step 2: Set Your Brand Colors

In the Colors section, customize:

Setting	Description	Recommendation
Primary Color	Main button and header color	Use your brand's primary color
Secondary Color	Accent elements	Complementary to primary
Background Color	Chat window background	White or light gray works best
Text Color	Message text color	Dark gray for readability

Click the color swatch to open the color picker, or enter a hex code directly.

Step 3: Upload Avatar/Logo

1. In the Avatar section, click Upload Image
2. Select an image file (PNG, JPG, SVG)
3. Recommended size: 64x64 pixels or larger (square)
4. The avatar appears in the chat header and widget button

Step 4: Configure Welcome Messages

In the Welcome Message section:

1. Greeting - The first message visitors see when opening the chat

   • Example: "Hi! How can I help you today?"

2. Placeholder Text - Text shown in the input field

   • Example: "Type your message..."

3. Suggested Questions (Optional) - Quick-start buttons visitors can click

   • Example: "What are your hours?", "How do I contact support?"

Step 5: Customize Widget Position

Choose where the chat widget appears on your website:

• Bottom Right (default and most common)
• Bottom Left

Step 6: Preview Your Changes

The Preview panel on the right shows your chatbot in real-time as you make changes.

• Click the widget button to see the expanded chat
• Test how colors look together
• Verify your avatar displays correctly

Step 7: Save Your Changes

Click the Save Changes button at the bottom of the form.

Your changes are saved immediately and will appear on your live chatbot.

Verify It's Working

1. Go to the Playground tab
2. Check that your colors and avatar are applied
3. Verify the welcome message appears correctly

Or, if already published:

1. Visit your website
2. Click the chat widget
3. Confirm your branding is visible

Design Tips

Color Contrast

• Ensure text is readable against background colors
• Use dark text on light backgrounds
• Test with both light and dark mode

Avatar Best Practices

• Use a square image for best results
• Keep it simple - icons work better than complex images
• Consider using your logo mark, not full logo with text

Welcome Messages

• Keep greetings short and friendly
• Mention what the bot can help with
• Add 2-3 suggested questions for common topics

Troubleshooting

Avatar Not Displaying

• Check image file format (PNG, JPG, SVG supported)
• Ensure file size is under 2MB
• Try uploading a square image

Colors Not Saving

• Make sure you click "Save Changes" button
• Refresh the page and check again
• Try using hex codes instead of color picker

Preview Not Updating

• The preview updates in real-time
• If stuck, refresh the page
• Check browser console for errors

Next Steps

• Add FAQs - Train your chatbot with questions and answers
• Test in Playground - Test your design in action
• Publish Your Chatbot - Deploy to your website