Branding

Customize your Boei widget to match your brand identity. The theme system automatically derives all colors from your brand color and applies them consistently across your widget, chatbot, FAQ, WhatsApp, and contact form.

How to get there: Go to Setup → Widget in the top menu, then click on your widget → Design tab → Colors sub-tab.

Brand Color

Your brand color drives the entire color scheme. Set it at the top of the Colors tab:

  1. Go to Design → Colors
  2. Click the color circle to open the color picker
  3. Choose your brand color

All other colors (headers, buttons, highlights, borders) are automatically derived from this.

Themes

Choose a theme to set the overall mood of your widget. Each theme applies a consistent visual style:

  • Clean — Surfaces tinted with your brand color. Warm, branded feel with colored backgrounds and matching borders.
  • Minimal — Pure white/greyscale surfaces. Brand color only appears in accents (highlighted items, buttons). Modern, shadcn-like aesthetic.
  • WhatsApp — Classic WhatsApp look with the WhatsApp green palette. Overrides your brand color.

Click a theme card to apply it instantly. All sub-widgets (chatbot, FAQ, WhatsApp, contact form) will follow the theme.

Launcher Color

By default, the floating button uses your brand color. You can override it with a different color:

  • Click the launcher color picker to set a custom color
  • Click the × button to reset back to following the brand color

Branded Header

Toggle the branded header on or off:

  • On — Headers use your brand color as background with white text (default for Clean theme)
  • Off — Headers use a white/seamless background with brand-colored text

This affects the widget header bar, chatbot header, FAQ header, WhatsApp header, and contact form header.

Gradient

Add a gradient effect to headers and the launcher button:

  • None — Solid brand color
  • Subtle — Light gradient (brand color → slightly lighter)
  • Vivid — Bold gradient with a hue shift (e.g., purple → blue)

Mode (Dark Mode)

Control how the widget appears on dark backgrounds:

  • Auto (OS) — Follows the visitor's operating system preference. Automatically switches between light and dark.
  • Light — Always shows light mode
  • Dark — Always shows dark mode

Dark mode colors are auto-generated from your theme. You can fine-tune them in Advanced color settings → Dark mode colors.

Widget Header

How to get there: Design tab → Panel sub-tab (only available for Container layout).

Add a branded header bar at the top of your widget channel list:

  • Title — Main heading (e.g., "How can we help?")
  • Subtitle — Secondary text (e.g., "Choose an option below to get started.")
  • Image — Upload an avatar or logo to display next to the title

The header uses your branded header colors (brand background when branded header is on, white when off).

Advanced Color Settings

For fine-grained control, expand Advanced color settings at the bottom of the Colors tab. Here you can individually edit:

  • Button colors — Launcher background, icon color
  • Widget colors — Container border, background, text
  • Channel colors — Channel item background, border, text, icon
  • Highlighted channel colors — Spotlighted item background, border, text
  • Input colors — Form input background, border, text
  • CTA colors — Call-to-action background, border, text
  • Dark mode colors — Edit individual dark mode colors or reset to auto-generated

Color Cascade

Your widget theme automatically flows to all sub-widgets:

Sub-widget How it works
AI Chatbot Automatically inherits widget colors. Customize independently in Chatbot → Branding.
FAQ Inherits all widget colors including header and item styling.
WhatsApp Colors update automatically when theme changes. Customize via the WhatsApp channel settings.
Contact Form Fully inherits widget colors including header and button styling.

Icon

Change the icon displayed on your widget:

  • Choose from preset icons
  • Upload your own custom icon

Shape

Define the shape of your widget button:

  • Round
  • Square
  • Rounded corners

Font

Customize the text appearance:

  • Font family
  • Font size

Position

Place the widget in any corner of the screen:

  • Bottom right (default)
  • Bottom left
  • Top right
  • Top left

Transparency

Make your widget semi-transparent (see-through) to blend with your site design.

Whitelabel

Hide the small Boei branding below the widget.