Appearance & Branding
Make your chat widget feel like a natural part of your website with complete customization options.
Color Customization
Customize every color element to match your brand identity perfectly.
Primary Color
Main button and accent color
Header Background
Widget header background
User Message
Background of visitor messages
Bot Message
Background of bot messages
Widget Background
Main chat area background
Text Colors
Message and UI text colors
Color Input Options
- • Color picker: Visual selector for any color
- • HEX codes: Enter exact values like #3B82F6
- • RGB/RGBA: Support for transparency
- • Brand presets: Save and reuse your brand colors
Widget Layout
Position
Most common position, works well for most sites
Good when right side has other elements
Size & Spacing
| Setting | Options | Default |
|---|---|---|
| Widget Width | 350px - 450px | 380px |
| Widget Height | 400px - 600px | 520px |
| Button Size | 48px - 72px | 60px |
| Offset X | 0px - 100px | 20px |
| Offset Y | 0px - 100px | 20px |
Border Radius
Square
0px
Rounded
12px
Pill
24px
Typography
Font Family
Choose a font that matches your brand or use system defaults for best performance.
System Default
The quick brown fox jumps over the lazy dog
Inter
The quick brown fox jumps over the lazy dog
Roboto
The quick brown fox jumps over the lazy dog
Custom (via CSS)
The quick brown fox jumps over the lazy dog
Font Sizes
Branding Elements
Bot Avatar
Custom Image
Upload your logo or mascot
Initials
Auto-generated from bot name
Icon
Choose from icon library
Launcher Button
Button Style Options:
- Icon only (default)
- Icon + text label
- Custom image
Animation Options:
- • Pulse (attention-grabbing)
- • Bounce (playful)
- • None (minimal)
Powered By Badge
Control the visibility of the "Powered by Chatmefy" badge.
Free & Pro Plans
Badge visible
Business Plan
Option to remove badge
Custom CSS
/* Customize widget button */
.chatmefy-launcher {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* Custom header styling */
.chatmefy-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Message bubble customization */
.chatmefy-message-bot {
border-radius: 16px 16px 16px 4px;
}
.chatmefy-message-user {
border-radius: 16px 16px 4px 16px;
}Business plan users can add custom CSS to override default styles and achieve pixel-perfect branding.