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
Font Family Configuration
Font Family Configuration
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
Language & Localization
Language & Localization
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
Button Layout Options
Button Layout Options
Advanced Customization Features
Custom CSS Styling
Custom CSS Styling
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
Dynamic Theme Switching
Dynamic Theme Switching
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
Responsive Design Optimization
Responsive Design 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)
- 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
- 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
- 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
- Brand color specifications
- Asset version control
- Style guide maintenance
Troubleshooting & Common Issues
Color & Display Issues
Color & Display 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
Image Problems
Image Problems
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.
Custom CSS Issues
Custom CSS Issues
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