Manual Styling Options

Fine-tune every visual element of your chatbot — from lead form colors and conversation bubbles to the chat button and global font settings.

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

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.