Step 5 - Customizing
Step 5: Styles & Appearance 🎨
Making your chatbot match your brand
Visual Customization Options:
Theme Settings
Choose the theme that best suits your website.
🎨 General Settings
Bot Avatar:
Upload custom image: 256x256 pixels recommended
File formats: JPG, PNG, GIF
Tips: Use your logo, mascot, or professional headshot
Fallback: Robot emoji (🤖) if no image uploaded
Widget Icon
What it affects: The way widget icon is seen on your website
Tips : You can select from the available options or you can upload on your own
Chat Color:
What it affects: Chat bubble, send button, user messages
How to choose: Match your website's main color
Color picker: Click to select or enter hex code (#007fff)
Font Settings:
Font Family: Inter, Roboto, Open Sans, Lato
Font Size: 12-20 pixels (14px recommended)
Tip: Match your website's typography
🖼️ Header Settings
Background Color:
Default: White (#FFFFFF)
Custom: Match your website header
Font/Icon Color:
Default: Black (#000000)
Ensure contrast: Make sure text is readable
💬 Popup ChatBox Settings
Dimensions:
Width: 300-500 pixels (424px default)
Max Height: 400-800 pixels (700px default)
Mobile tip: Smaller widths work better on mobile
🎯 Chat Window Settings
Background Colors:
Chat window: Usually white or light gray
AI messages: Light blue or gray (#007fff1a)
User messages: Your brand color (#007fff)
Font Colors:
AI message text: Dark gray (#1C1C1C)
User message text: White or dark (ensure readability)
🔵 Chat Widget Bubble
Size Settings:
Height & Width: 40-80 pixels (55px default)
Keep proportional: Same height and width for perfect circle
Position:
Bottom Right: Most common, doesn't interfere with navigation
Bottom Left: Good if you have other widgets on the right
🎨 Style Strategy by Brand:
Professional/Corporate:
Colors: Blues, grays, subtle
Font: Roboto or Open Sans
Avatar: Logo or professional headshot
Size: Standard dimensions
Creative/Fun:
Colors: Bright, brand-specific
Font: Inter or Lato
Avatar: Mascot or character
Size: Slightly larger for visibility
Minimalist:
Colors: Monochrome or single accent
Font: Inter, clean
Avatar: Simple logo or icon
Size: Smaller, unobtrusive
📱 Mobile Optimization Tips:
Test width: Preview on mobile devices
Check colors: Ensure readability on small screens
Position: Bottom right usually works best
Size: Don't make bubble too large
✅ Step 5 Checklist:
Last updated