Customization
Customize the appearance and visual design of your Support BV
Support BV Customization
Customize your Support BV's appearance to match your brand identity and create a seamless customer experience on your website.
Quick Setup
Navigate to Customization
From your BrandVox dashboard, select Support BV > Customization tab.
Make Changes
Adjust colors, positioning, icons, and messaging in real-time using the live preview.
Publish
Click Publish to make your customization live on your website.
Key Customization Options
Brand Colors & Icons
Primary Color - Sets the main brand color for:
- Chat bubble background
- Send button
- Header background
- Active states
Custom Icon - Upload your brand logo or icon (SVG/PNG, max 100KB)
Typography - Choose font family and size to match your website
Positioning & Layout
| Position | Best For |
|---|---|
| Bottom Right | Most websites (default) |
| Bottom Left | RTL languages |
| Custom | Advanced positioning |
Window Size Options:
- Compact: Mobile-friendly
- Standard: Recommended
- Large: Maximum visibility
Welcome Message
Customize the initial greeting customers see:
- Keep it under 100 characters
- Make it friendly and helpful
- Match your brand's tone
Example:
"Hi there! 👋 How can we help you today?"
Chat Header
Configure the header with:
- Company name or assistant name
- Optional subtitle (e.g., "Available 24/7")
- Brand logo display
Interactive Elements
Add Buttons with Action Map
Want to add interactive buttons to your chat interface? Use the Action Map → Buttons Node to create clickable buttons that guide users through common actions or questions.
The Buttons Node lets you:
- Add multiple buttons with custom text
- Choose from different button styles (primary, secondary, subtle)
- Connect buttons to specific conversation flows
- Create quick-action menus for users
Note: Buttons currently work in chat bubble and iframe deployments only (not available in third-party integrations like Messenger or Instagram).
Visual Styling
Border & Corners
Choose corner radius for modern or playful appearance:
- Sharp (0px): Modern, minimal
- Rounded (16px): Friendly (recommended)
- Very Rounded (24px): Playful
Mobile Responsiveness
Your Support BV automatically adapts to mobile devices with options for:
- Full screen mode
- Overlay mode
- Bottom sheet
Mobile Testing
Always test on actual mobile devices to ensure optimal user experience.
Advanced Options
Widget Visibility
Control where Support BV appears:
- Always visible on all pages
- Show on specific URLs only
- Hide on certain pages
- Time-based visibility (business hours)
Custom CSS
For advanced users, add custom CSS to further personalize appearance.
Advanced Feature
Custom CSS requires web styling knowledge. Test thoroughly before deploying.
Testing & Publishing
Live Preview
The customization dashboard updates in real-time as you make changes. Test different states (closed, open, typing) before publishing.
Save & Publish
Save Draft - Store changes without making them live Publish - Make customization live (typically updates within 2-3 minutes)
Changes Published
Your updates are typically live within 2-3 minutes. Clear your browser cache if changes don't appear immediately.
Best Practices
- Visual Consistency - Match your website's color scheme and design
- Accessibility - Ensure sufficient color contrast and legible fonts
- Performance - Optimize images before uploading
- User Experience - Position Support BV where it's visible but not intrusive