Appearance Settings

Customize colors, fonts, themes, and visual design to match your brand identity perfectly.

Color Scheme

Primary Colors

Configure the main colors that define your widget's appearance:

Primary Color

Used for the bubble, header background, and primary buttons. Should be your brand's main color.

#2563EB

Secondary Color

Used for accents, hover states, and secondary UI elements.

#475569

Success Color

Used for success messages and positive feedback.

#16A34A

Message Bubbles

Customize how user and bot messages appear:

User Messages

This is a user message

• Background: Primary color
• Text: White or high contrast
• Alignment: Right-aligned

Bot Messages

This is a bot response

• Background: Light gray
• Text: Dark gray or black
• Alignment: Left-aligned

Accessibility

Ensure sufficient color contrast between text and background. Aim for WCAG AA standard (4.5:1 ratio) for normal text and AAA (7:1) for optimal accessibility.

Background

Configure the chat window background:

Solid Color: Clean, professional appearance
Gradient: Modern, dynamic look with color transitions
Pattern: Subtle texture or pattern for visual interest
Image: Custom background image (use with caution for readability)

Background images should be subtle and not interfere with text readability. Consider adding a semi-transparent overlay.

Typography

Font Family

Choose fonts that match your brand and ensure readability:

Inter, System UI

Modern, clean sans-serif. Excellent readability.

Georgia, Serif

Classic, traditional appearance. Good for formal brands.

Monaco, Monospace

Technical, developer-focused aesthetic.

Web Fonts

You can use Google Fonts or custom web fonts. Make sure to include proper fallbacks for loading states.

Font Sizes

Configure text sizes for different elements:

Header Text: 18-20px - Bold, attention-grabbing
Message Text: 14-16px - Comfortable reading size
Timestamp: 12px - Subtle, secondary information
Input Placeholder: 14px - Matches message text

Text Styling

Additional typography options:

Line Height: 1.5 for body text, 1.2 for headings
Letter Spacing: Slightly increased for all-caps text
Font Weight: Regular (400) for body, semi-bold (600) for headings
Text Transform: Capitalize headings if desired

Theme Presets

Pre-built Themes

Start with professionally designed themes and customize from there:

Default Blue

Professional and trustworthy. Works for most businesses.

Fresh Green

Natural and friendly. Great for health, wellness, eco brands.

Warm Red

Bold and energetic. Ideal for retail, food, entertainment.

Minimal Gray

Clean and modern. Perfect for tech, design, minimalist brands.

Dark Mode

Support dark mode for users who prefer darker interfaces:

User Preference

Auto dark mode respects the user's system preferences, providing a seamless experience without manual configuration.

Spacing & Layout

Border Radius

Control the roundness of UI elements:

None (0px)

Small (4px)

Medium (8px)

Large (16px)

Padding & Margins

Adjust spacing for a comfortable reading experience:

Message Padding: 12-16px for comfortable touch targets
Message Spacing: 8-12px between consecutive messages
Input Padding: 12px for easy text entry
Window Padding: 16-20px for proper edge spacing

Next: Configure Header

Learn how to customize your widget's header with branding and status information.

Header Configuration →