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 Widgets in the left menu, then click your widget → Design.

Designing the widget: its colours, its position and the channels it offers.

Brand Color

Your brand color drives the entire color scheme. Set it at the top of the Design page:

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

You can also paste a hex, RGB, RGBA, HSL or HSLA color, or transparent. Boei keeps any transparency when you save.

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:

  • Modern: The default for new widgets. Calm layered surfaces, balanced rounding, clear hierarchy, and polished interaction states.
  • 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: Go to Widgets → click your widget → Panel → Widget Header (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. Accepted formats: JPG, PNG, WebP, GIF (animated GIFs keep their animation), and SVG (vector logos stay crisp). Max 8 MB.
  • Size — Click the Size button next to the image to set the pixel size shown in the header. Range is 1 to 200 px; leave empty for the default (40 px). Uploaded images are stored at up to 512 px on the longest edge, so you can render them larger without loss.

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 near the bottom of the Design page. 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

Choose one of these supported font options:

  • System default: The default option. Uses Boei's system-font stack for a fast, consistent interface.
  • Arial: Uses the visitor's locally available Arial-compatible font.
  • Montserrat: Hosted by Boei.
  • Roboto: Hosted by Boei.
  • EB Garamond: Hosted by Boei.

Boei keeps its font names separate from your website's fonts. If your website blocks Boei's font downloads, the widget uses a fallback font. It does not reuse your website's font file.

For custom CSS inside the widget, use font-family: inherit to keep the selected widget font. The hosted fonts use the internal names "BoeiWidget Montserrat", "BoeiWidget Roboto", and "BoeiWidget EB Garamond".

Montserrat, Roboto, and EB Garamond are currently served as Latin font files. Text in other writing systems may use the visitor's system fallback font.

Older widget font choices are normalized automatically when the update is deployed. inherit, empty values, unknown values, and URL-based font definitions become System default. Older sans-serif choices such as Helvetica, Verdana, and Calibri become Arial. Older serif choices such as Times New Roman, Cambria, and Garamond become EB Garamond. Existing widgets do not need to be saved again for this migration.

You can also customize:

  • 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 "Powered by" credit shown below the widget.

How to get there: Widgets → click your widget → Advanced → scroll to Branding.

The dropdown has these options:

  • Hide branding — Nothing is shown below the widget. Requires the White-label add-on.
  • Display small branding (your text) — Shows the custom "Powered by" text your agency or account has configured.
  • Display small Boei branding — Default fallback with the Boei credit (and your affiliate link if you have one).

This is a per-widget setting. If you manage multiple widgets (or client widgets as an agency), open each one and set it individually. New widgets show branding by default.

Agencies: set the custom product name and "Powered by" text once in Account → Clients → Branding, then hide branding per client widget here.