Skip to main content

Widget Branding

Customize the visible brand layer of the widget so it matches 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​

You can control:

  • Logo URL for the launcher and header
  • Avatar URL for assistant messages
  • Show avatar toggle when you want 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 used 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 richer 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 so you can 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, but avoid making it so custom that important controls lose contrast or readability.