Interface Customization Guide

Make your chatbot uniquely yours with extensive customization options.

Theme Settings

Light vs Dark Theme

Choose the base theme for your chatbot:

Light Theme

Clean, professional appearance
Better for business environments
Easy to read in bright conditions
Default option

Dark Theme

Modern, sleek look
Reduces eye strain
Popular with tech-savvy users
Better for dark websites

Custom Colors

Primary Color

Main brand color
Used for buttons and accents
Should be readable
Test contrast carefully

Background Color

Chat window background
Should complement primary
Consider readability
Test with both themes

Text Colors

Message text color
Label colors
Link colors
Timestamp colors

Branding Elements

Logo & Icons

Profile Picture

Displayed in chat header
Recommended: 200x200px
Formats: PNG, JPG, SVG
Max file size: 2MB

Best Practices:

Use square image
High resolution
Transparent background (PNG)
Brand-consistent design

Chat Icon

Appears in widget bubble
Recommended: 64x64px
Should be simple and recognizable
Used in collapsed state

Display Name

Shown in chat header
Typically your business or bot name
Keep it short (2-3 words)
Should be memorable

Message Styling

Initial Messages

Set welcome messages:

First message shown to users
Can include multiple messages
Use emoji for friendliness
Include clear call-to-action

Example:

"👋 Hi! I'm Olara, your AI assistant. How can I help you today?"

Suggested Messages

Quick reply buttons:

Common questions
Popular topics
Navigation options
Up to 6 suggestions

Example:

"How do I get started?"
"Pricing information"
"Contact support"
"View demo"

Message Placeholder

Input field placeholder text:

Encourages user to type
Should be action-oriented
Keep it concise

Examples:

"Type your message..."
"Ask me anything..."
"How can I help?"

Chat Behavior

Chat Position

Choose where chat appears:

Bottom Right: Standard position
Bottom Left: Alternative
Center: Full attention
Custom: Specify coordinates

Chat Size

Small: 350x500px
Medium: 400x600px (recommended)
Large: 500x700px
Full Screen: Entire viewport

Alignment

Left: Messages aligned left
Right: Messages aligned right
Alternating: Different colors per sender

Advanced Options

Typing Indicator

Show when bot is "typing":

Improves perceived speed
More human-like interaction
Can be disabled
Adjustable delay (0-3 seconds)

Message Delays

Simulate natural conversation:

Short: 0.5 seconds
Medium: 1 second
Long: 2 seconds
Custom: Specify milliseconds

Sound Effects

Message received sound
Message sent sound
Notification sound
Can be disabled

Animation Effects

Fade in messages
Slide animations
Bounce effects
Typing animation

Preview & Testing

Live Preview

Real-time preview of changes
Test all interactions
View on different devices
Check color contrast

Device Testing

Desktop view (1920x1080)
Tablet view (768x1024)
Mobile view (375x667)
Custom resolutions

Browser Testing

Test across browsers:

Chrome
Firefox
Safari
Edge

Tips for Great Design

Consistency

✅ Match your website colors
✅ Use same fonts
✅ Align with brand guidelines
✅ Consistent tone of voice

User Experience

✅ Keep it simple
✅ Use clear CTAs
✅ Provide helpful suggestions
✅ Test with real users

Performance

✅ Optimize images
✅ Minimize animations
✅ Test load times
✅ Monitor user feedback

Accessibility

✅ High contrast colors
✅ Large tap targets
✅ Clear typography
✅ Screen reader friendly

Sign Up Olara

Setup in Minutes

Free Trial

24/7 Support