Skip to main content
Theme Customization Interface Create a visually stunning widget that perfectly matches your brand identity. The Theme Customization feature provides powerful tools to control every aspect of your widget’s appearance, from colors and fonts to layouts and images.

​
Why Customize Your Theme?

Brand Consistency

Ensure your widget seamlessly integrates with your website’s design language and brand guidelines

Professional Appeal

Stand out with a polished, custom-designed interface that builds trust and credibility

User Experience

Create an intuitive, visually pleasing experience that encourages user engagement

Competitive Edge

Differentiate your business with a unique, memorable widget design

​
Quick Start Guide

1

Access Theme Settings

Navigate to your agent dashboard and click Theme in the left sidebar
2

Choose Your Approach

Select between Preset Themes for quick setup or Custom Theme for full control
3

Configure Visual Elements

Set up fonts, colors, images, and layout preferences
4

Preview & Fine-tune

Use the live preview to test your design across different scenarios
Start with a preset theme close to your brand colors, then customize specific elements for the perfect match!

​
Theme Configuration Options

  • Visual Styling
  • Image Assets
  • Color Themes
Font Options:
- Any Google Font name (e.g., "Roboto", "Open Sans", "DM Sans")
- "inherit" - Use your website's existing font
- Custom web fonts (via CSS import)
Popular Professional Fonts:
  • DM Sans - Modern, clean (default)
  • Inter - Highly readable, tech-focused
  • Poppins - Friendly, approachable
  • Roboto - Google’s flagship, versatile
Avoid “inherit” unless you’re certain your website font loads properly in the widget context

Automatic Translation

  • 50+ supported languages
  • Auto-translates labels and placeholders
  • Maintains context and meaning
  • Right-to-left (RTL) support

Custom Translations

  • Override auto-translations
  • Brand-specific terminology
  • Cultural adaptations
  • Regional dialects
  • Vertical Layout
  • Horizontal Layout

Best For:

  • ✅ Mobile-first designs
  • ✅ Limited horizontal space
  • ✅ Clean, stacked appearance
  • ✅ Easy thumb navigation

​
Advanced Customization Features

/* Example custom CSS overrides */
.widget-container {
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.chat-message {
  font-weight: 500;
  line-height: 1.6;
}

.primary-button {
  background: linear-gradient(45deg, #your-color1, #your-color2);
}
CSS Customization Capabilities:
  • Override default styling
  • Add custom animations
  • Implement brand-specific effects
  • Fine-tune spacing and typography
Advanced CSS should be tested thoroughly across different browsers and devices

Time-based Themes

  • Automatic light/dark switching
  • Business hours adaptations
  • Seasonal theme changes
  • Event-based styling

User Preferences

  • Remember user’s theme choice
  • Respect system preferences
  • Accessibility accommodations
  • Custom user overrides
  • Mobile Considerations
  • Desktop Optimization

Mobile-First Design Principles

  • 🔄 Vertical layouts work better on mobile screens
  • 👆 Touch-friendly buttons with adequate spacing
  • 📱 Readable fonts at minimum 14px size
  • 🎯 High contrast for outdoor visibility
  • ⚡ Fast loading optimized images

​
Theme Best Practices

Visual Hierarchy

Color Usage:
  • Primary: 60% (backgrounds, main areas)
  • Secondary: 30% (buttons, highlights)
  • Accent: 10% (calls-to-action, emphasis)
Typography Scale:
  • Headers: 18-24px
  • Body text: 14-16px
  • Small text: 12-14px

Accessibility Standards

WCAG Compliance:
  • Color contrast ratio ≥ 4.5:1
  • Focus indicators for navigation
  • Alternative text for images
  • Keyboard accessibility
Testing Tools:
  • Color contrast analyzers
  • Screen reader compatibility
  • Voice navigation support

Performance Optimization

Image Optimization:
  • WebP format when possible
  • Compress without quality loss
  • Responsive image sizing
  • Lazy loading implementation
CSS Efficiency:
  • Minimize custom CSS
  • Use system fonts when appropriate
  • Optimize animation performance

Maintenance Strategy

Regular Updates:
  • Seasonal theme refreshes
  • Brand guideline alignment
  • User feedback incorporation
  • A/B testing insights
Documentation:
  • Brand color specifications
  • Asset version control
  • Style guide maintenance

​
Troubleshooting & Common Issues

  • Colors Not Appearing
  • Contrast Issues
1

Verify Color Format

Ensure colors are in valid HEX format (#RRGGBB)
2

Check Theme Application

Confirm custom theme is selected and saved
3

Clear Browser Cache

Force refresh to see latest changes
4

Test Across Browsers

Verify appearance in different browsers
Common Image Issues & Solutions:
  • Not loading: Check file size (≤0.5MB) and format (PNG/JPG/WebP)
  • Poor quality: Use high-resolution source images
  • Slow loading: Compress images using tools like TinyPNG
  • Wrong dimensions: Resize to recommended specifications
Images hosted on external servers may have CORS restrictions. Use the built-in upload feature for reliable delivery.

CSS Not Applied

  • Check CSS syntax validity
  • Ensure proper selector specificity
  • Verify no conflicting styles
  • Test with minimal CSS first

Performance Impact

  • Minimize complex animations
  • Use efficient selectors
  • Avoid excessive DOM manipulation
  • Test on slower devices
Pro Tip: Always test your theme changes in incognito/private browsing mode to see the true user experience without cached styles.

​
What’s Next?

Tabs Configuration

Create interactive multi-tab experiences that complement your custom theme

Widget Configuration

Configure advanced widget behaviors and interactive features

Analytics & Testing

Monitor user engagement and A/B test different theme variations

Voice Integration

Add voice capabilities that match your theme’s professional appearance