Header Styles

Customize the widget header appearance.

Header Types

Solid Color

A single color header:

Type: Solid
Color: #7C3AED (primary color)

Clean and simple, works well with most brands.

Gradient

Two-color gradient header:

Type: Gradient
Start Color: #7C3AED
End Color: #6D28D9
Direction: Horizontal (or Vertical, Diagonal)

Adds visual interest while maintaining professionalism.

Image

Custom background image:

Type: Image
Image: header-background.jpg
Overlay: Semi-transparent dark (for text readability)

Use for strong brand presence or seasonal themes.

Header Content

Logo

Display your company logo:

Setting	Recommendation
Size	32-40px height
Format	SVG or PNG with transparency
Position	Left side

Company Name

Show company name instead of or alongside logo:

Show Name: Yes
Font Size: 16px
Font Weight: 600
Color: White (auto-contrast)

Tagline

Optional subtitle text:

Tagline: "We're here to help"
Font Size: 12px
Color: White (80% opacity)

Status Indicators

Online Status

Show availability status:

Status	Display
Online	Green dot + "We're online"
Away	Yellow dot + "Away"
Offline	Gray dot + "Leave a message"

Response Time

Expected response time:

Show Response Time: Yes
Format: "Usually replies in 5 minutes"

Action Buttons

Close Button

Position and style of the X button:

Setting	Options
Position	Top-right (default)
Size	24-32px
Color	White or auto-contrast
Hover	Background highlight

Additional Actions

Optional action buttons in the header:

Action	Icon
Minimize	Chevron down
Settings	Gear icon
New Chat	Plus icon

Height

Fixed Height

Standard header height:

Height: 56px (compact)
Height: 72px (standard)
Height: 88px (expanded)

Expanded Header

Larger header for more branding:

• More room for logo
• Space for tagline
• Better image display

Mobile Header

On mobile devices:

Behavior	Description
Full Width	Spans entire screen
Safe Area	Respects notch/status bar
Gesture	Swipe down to minimize

Code Examples

Solid Header Config

header: {
  type: 'solid',
  color: '#7C3AED',
  logo: 'https://example.com/logo.svg',
  showName: false,
  showStatus: true
}

Gradient Header Config

header: {
  type: 'gradient',
  startColor: '#7C3AED',
  endColor: '#6D28D9',
  direction: 'horizontal',
  companyName: 'Acme Support',
  tagline: 'How can we help?'
}

Image Header Config

header: {
  type: 'image',
  imageUrl: 'https://example.com/header-bg.jpg',
  overlay: 'dark',
  overlayOpacity: 0.6,
  logo: 'https://example.com/logo-white.svg'
}

Design Tips

Contrast

Ensure text is readable:

• Use dark overlay on images
• Check color contrast ratios
• Test with different image content

Branding

Balance branding with functionality:

• Logo should be recognizable at small size
• Don't overcrowd the header
• Keep it clean and professional

Consistency

Match your website's header style:

• Same colors as navigation
• Similar logo treatment
• Consistent typography feel