Widget Appearance

Last updated: November 29, 2025

Make your chat widget match your brand perfectly. This guide covers all visual customization options.

Color SettingsPrimary Color

Your brand's main color, used for:

Chat bubble background
Send button
Active states
Links and accents

Secondary Color

Complementary color for:

User message bubbles
Hover states
Secondary buttons

Text Colors

Header text: Title and status text
Message text: Conversation content
Placeholder text: Input hints

Position & Size

Choose where the widget appears:

Bottom Right: Most common, standard placement
Bottom Left: Alternative for RTL languages or preference

Button Size

Small: 48px - Minimal footprint
Medium: 56px - Balanced (default)
Large: 64px - Maximum visibility

Chat Window Size

Compact: 350px wide
Standard: 400px wide (default)
Large: 450px wide

Visual ElementsChat Bubble Icon

Choose from preset icons or upload custom:

Message bubble (default)
Support agent
Question mark
Custom SVG upload

Border Radius

Control roundness of elements:

Square: 0px
Slightly rounded: 8px
Rounded: 16px (default)
Fully rounded: 24px

Shadow

None
Subtle
Medium (default)
Strong

Animation SettingsOpen Animation

Slide up
Fade in
Scale up
None

Attention Grabber

Optional animation to draw attention:

Bounce
Pulse
Shake
None

Preview & Testing

Always preview changes before saving:

Make adjustments in Bot Studio
Click Preview to see live result
Test on different screen sizes
Save when satisfied