Header Configuration

Customize your widget's header to display branding, status information, and provide navigation controls.

What's the Header?

The header is the top section of your chat window. It typically displays your brand name, status, and a close button. It's the first thing users see when they open your widget.

Header Content

Title

The main text displayed in the header. This is typically your brand name or department name.

Good Examples:

• "Support Team"
• "Sales Chat"
• "Your Company Name"
• "AI Assistant"
• "Help Center"

Keep It Short

Titles should be 2-4 words maximum. Longer titles may be truncated on mobile devices.

Subtitle

Optional secondary text providing additional context or status information.

Status Messages

• "Online now"
• "Typically replies instantly"
• "Available 24/7"
• "Powered by AI"

Descriptive Text

• "How can we help?"
• "Ask me anything"
• "We're here to help"
• "Get instant answers"

Header Icon

Avatar/Logo

Display a logo, avatar, or icon in the header to reinforce brand identity.

Company Logo

Upload your brand logo for instant recognition. Recommended: 40x40px square image.

Avatar Image

Use a photo of a team member or mascot to add a personal touch.

Icon

Choose from built-in icons or upload a custom SVG icon.

Image Requirements

Upload square images (1:1 ratio) in PNG, JPG, or SVG format. Maximum file size: 100KB. Images will be automatically resized and optimized.

Online Status Indicator

Show a status dot next to the avatar to indicate availability:

Online

Away

Busy

Offline

Header Actions

Close Button

Allow users to close the chat window:

Show Close Button: Display an X button in the top-right corner
Close Action: Minimize to bubble or hide completely
Confirmation: Optionally ask "Are you sure?" before closing

Inline Widgets

Close buttons are typically hidden for inline widgets since they're embedded in page content.

Minimize Button

For floating widgets, allow minimizing back to the bubble:

Sound Toggle

Let users enable/disable notification sounds:

🔔

Sound Notifications

Toggle button for message notification sounds

Custom Actions

Add custom buttons for specific actions:

Header Styling

Background

Customize the header background to match your brand:

Solid Color: Use your primary brand color
Gradient: Modern two-color gradient effect
Transparent: Blend with chat window background
Image: Subtle background pattern or texture

Text Color

Ensure header text is readable against the background:

Light text on dark background

Best for colored headers

Dark text on light background

Best for minimal designs

Contrast Check

Always verify sufficient contrast between header text and background. Use tools like WebAIM's Contrast Checker to ensure WCAG compliance.

Height & Padding

Control header size and spacing:

Dynamic Headers

Context-Aware Content

Change header content based on user context or chat state:

Typing Indicator in Header

Show when the bot is typing in the header subtitle:

AI is typing...

Next: Configure Footer

Learn how to customize the footer area with branding and helpful links.

Footer Settings →