Branding Tab

Make your chatbot look like it belongs on your website. Customize colors, upload logos, and style every element to match your brand.

The Branding tab lets you customize your chatbot's visual appearance. You can style everything from colors and fonts to logos and chat bubble designs.

Lead Form

Header, buttons, logo, and form styling

Conversation

Message bubbles, input field, avatars

Chat Button

Launcher button color and position

Global

Fonts, border radius, shadows

Import Brand (Quick Setup)

The fastest way to brand your chatbot is using Import Brand. Enter your website domain and Hyperleap will automatically extract your brand colors and logo.

Import Brand popup showing domain input and Fetch Brand button
Import Brand feature automatically extracts colors and logos from your website

How to Use Import Brand

  1. Click "Import Brand" in the Branding tab
  2. Enter your domain (e.g., "hyperleap.ai")
  3. Click "Fetch Brand"
  4. Review the extracted brand elements
  5. Select which elements to apply
  6. Click "Confirm & Apply Changes"

Confirm Brand Import

After fetching your brand, you'll see a preview of all extracted elements. Select which ones to apply to your chatbot.

Confirm Brand Import modal showing color and logo options
Review and select which brand elements to apply

Importable Elements

Brand Colors

Header background, button colors, message backgrounds

Logo

Your company logo for the chat header

Bot Avatar

Avatar image for bot messages

Header Background

Background image for the chat header

Tip:
You can uncheck any elements you don't want to import. For example, keep your custom colors but import just the logo.

Manual Styling Options

After importing (or instead of importing), you can manually customize every visual element.

Branding tab showing all styling options after brand import
Full branding options with imported colors and manual overrides

Lead Form Styling

  • Header Background — Image or color for the form header
  • Header Background Color — Solid color behind the header
  • Sub Header Text Color — Color for subtitle text
  • Sub Header Text Font Size — Typography size
  • Body Text Color — Main text color
  • Button Text Color — Submit button text
  • Button Background Color — Submit button fill
  • Button Font Size — Button text size
  • Button Border Radius — Button corner roundness
  • Logo — Upload your logo image
  • Header Text Color — Main heading color
  • Header Text Font Size — Heading typography
  • Header 3 Font Size — Tertiary heading size

Conversation Styling

Similar options are available for styling the conversation interface, including:

  • Message bubble colors (user vs bot)
  • Input field styling
  • Send button appearance
  • Avatar images

Chat Button Styling

Customize the floating chat launcher:

  • Button color and icon
  • Position (bottom-right, bottom-left)
  • Tooltip styling

Global Settings

Apply consistent styling across all elements:

  • Font family
  • Border radius (rounded corners)
  • Shadow effects

Import Styling from Other Chatbots

If you've created multiple chatbots, you can import styling from one to another using"Import Styling".

Import Styling search showing chatbot templates to copy from
Search and import styling from existing chatbots

This is useful when you want consistent branding across multiple chatbots or want to start with a proven design template.

Note:
Importing styling will override your current branding settings. You can undo this by clicking "Reset Styling" to return to defaults.

Best Practices

Match your website

Use the same colors, fonts, and logo as your main site

Ensure readability

High contrast between text and background colors

Test on mobile

Preview how your chatbot looks on smaller screens

Keep it clean

Simple designs work best for chat interfaces

Next Steps

With your branding complete, proceed to Advanced Settings to configure analytics, notifications, and workflow automation.