Branding by Screen

Open your chatbot, select the Design tab, pick a screen, and switch to Branding. Whether you imported your brand first or are starting from the defaults, every field below can be changed by hand. The preview updates as you go.

Chat Button

Design → Chat button → Branding. Start by picking a Button Style; the fields below it change to match.

Classic (Icon Only)

A round floating button, the most familiar chat launcher. It takes up little room and sits in a corner of every page.

• Icon Appearance — Background, Color, and Border Radius of the round button
• Message Bubble — Icon Position (Icon on Left or Icon on Right), Background, and Text Color of the bubble next to the button. The bubble's words are set in Chat button → Content.

Wide (Icon + Text)

A pill-shaped button with an icon and a short label (e.g., "Chat with us"). It's more visible than Classic, so visitors see straight away that help is available.

• Wide Button — Icon Position (Left of Text or Right of Text), Font Size, Button Background, Icon & Text Color, and Border Radius

Spotlight Bar (Command Palette)

A wide bar fixed to the bottom of the page, like the command palettes in many apps. Instead of a floating button, visitors see a persistent bar with an icon and prompt text. It suits pages where chatting is the main goal, such as a pricing or support page.

• Bar Styling — Background, Border Color, Border Radius, Text Color, and Placeholder Color
• Icon — Icon Background and Icon Color
• Hover State — Hover Background and Hover Border Color

Settings for Every Style

• Button Position — Bottom Left, Bottom Right, or Bottom Center
• Shadow — Switch it on to set Horizontal, Vertical, Blur, Spread, and the shadow color
• Button Offset (px) — How far the button sits from the edge, 0–200 px, set separately for desktop and mobile. The mobile values apply on screens 640 px wide or less; leave them blank to use the desktop values.

Lead Form

Design → Lead Form → Branding.

Header

• Header Background — Upload an image for the top of the form. You can crop it to fit.
• Logo — Upload your logo (cropped square). The switch beside it hides the logo without deleting it.
• Background — The header color
• Text Color and Sub Header Color
• Header Font Size, Sub Header Font Size, and Heading 3 Font Size

Body & Buttons

• Body Text Color and Body Font Size
• Button Background, Button Text Color, and Button Font Size for the submit button
• Button Border Radius — How rounded the submit button's corners are

Conversation

Design → Conversation → Branding.

• Header — Background, Text Color, and Text Font Size of the chat window's title bar
• Message Bubbles — Assistant Background, User Background, Assistant Text Color, User Text Color, Send Button Color, and Message Font Size
• User Message Avatar and Bot Message Avatar — Upload an image for each, or clear it
• Input Text Font Size — The size of what visitors type

Global

Design → Global. Global has branding only, so there's no toggle. These settings apply across every screen.

• Font Family — Inherit, Modern Sans, Classic Sans, Serif, Monospace, or Decorative
• Body Background Color
• Border Radius — How rounded the chat window's corners are
• Shadow — Horizontal, Vertical, Blur, and Spread for the chat window
• Show Branding — Switch it off to remove the "Powered by Hyperleap AI" badge. Available on Pro and Max; see The Hyperleap Badge.

Best Practices

Next Steps

Check your work in the Live Preview, then move on to the Behaviour Tab to shape how your chatbot answers.