Customizing Widget Appearance
Make your chat widget match your brand perfectly.
Available Customizations
| Setting | Description | Pro Only |
|---|---|---|
| Primary Color | Main brand color for header and buttons | No |
| Position | Bottom-right or bottom-left | No |
| Button Size | Small, medium, or large | Yes |
| Header Title | Custom title in chat header | Yes |
| Header Subtitle | Tagline under the title | Yes |
| Chat Background | Background color of message area | Yes |
| User Bubble Color | Color of visitor's messages | Yes |
| Bot Bubble Color | Color of AI's messages | Yes |
| Show Branding | Show/hide "Powered by Site2CRM" | Yes |
Basic Customization (All Plans)
- Go to Chat Widget > select your agent
- Find Appearance section
- Set Primary Color (use your brand color)
- Choose Widget Position (bottom-right recommended)
- Save changes
Pro Customization
With the Pro plan, you can fully brand the widget:
Header
- Header Title: "Chat with Sales" or your company name
- Header Subtitle: "We reply instantly" or your tagline
Colors
- Chat Background: Light gray (#f9fafb) works well
- User Bubble: Usually your primary color
- Bot Bubble: White (#ffffff) for readability
Button
- Small: 48px - subtle, less intrusive
- Medium: 60px - balanced (default)
- Large: 72px - high visibility
Branding
- Toggle off "Show Branding" to remove "Powered by Site2CRM"
Color Tips
Primary Color
- Use your main brand color
- Should contrast with white text
- Avoid very light colors
Chat Background
- Light colors work best
- Ensures message bubbles are readable
- #f9fafb (light gray) or #ffffff (white)
Bubble Colors
- User bubble: Brand color or darker shade
- Bot bubble: White or very light gray
- Ensure text is readable on both
Position
Bottom-right (recommended)
- Standard convention
- Most users expect chat here
- Works well on most layouts
Bottom-left
- Use if you have conflicting elements on right
- Less common but still works