Skip to main content

Widget Branding

Customize the visible brand layer of the widget to match your site.

Core Branding Controls​

Widget Title​

Set the title shown in the widget header.

Examples:

  • Support
  • Sales
  • Ask us anything
  • Your brand name

Logo and Avatar​

Control:

  • Logo URL for the launcher and header
  • Avatar URL for assistant messages
  • Show avatar toggle for a cleaner, text-only conversation layout

Launcher Icon​

The launcher can use:

  • An emoji such as 💬
  • Short text such as AI
  • A direct image URL

Colors​

Customize the accent color for:

  • Launcher button
  • Send button
  • Links and action emphasis
  • Assistant bubble treatment when applicable

Use #RRGGBB hex colors for primary and secondary colors.

Position and Theme​

Set:

  • Widget position on the left or right
  • Light, dark, or auto theme mode
  • A theme preset or fully custom colors

For more appearance controls such as language, theme presets, offline states, and custom CSS/JS, see Widget Experience.

Preview Workflow​

The website detail page includes a live preview. Review changes before checking the live site.

After saving:

  1. Refresh the live site
  2. Open the widget
  3. Verify the launcher, header, avatars, and action styling

Recommendations​

  • Keep titles short so the header stays balanced on mobile.
  • Use a launcher icon that is readable at small sizes.
  • Test light and dark surfaces if you use auto theme mode.
  • If you add custom CSS later, start from a saved working state first.
tip

Use branding to make the widget feel native to your site. Avoid making it so custom that important controls lose contrast or readability.