UserHero Docs
Live Chat

Customizing the widget

Match the chat widget to your brand, choose where it appears, and control what visitor context you collect.

Customizing the widget

Open your project's Live Chat → Settings and use the Appearance and Targeting tabs. A live preview on the right shows your changes as you make them — then Save.

Appearance

Theme & color

  • Theme — Light, Dark, or Auto (follows the visitor's system setting).
  • Accent color — the primary color for buttons and highlights.
  • Border radius — how rounded the widget's corners are.

Launcher — the button visitors click to open the chat

  • Icon, label, and size. Leave the label empty for a compact, icon-only button.
  • Position (bottom-left or bottom-right) and margins from the screen edges.
  • Optionally let visitors drag the launcher or minimize it to a small dot.

Chat window

  • Header title & subtitle — for example a welcome line and your typical reply time.
  • Brand avatar / logo — shown in the chat header and as the fallback agent avatar.
  • Show agent name & photo — reveal the replying agent's name and photo on their messages, or keep replies generic.
  • Message input placeholder.

Branding — show or hide the "Powered by UserHero" line in the footer.

Saved changes reach live widgets within about a minute — no need to update the snippet on your site.

Targeting — where the widget appears

By default the widget shows on every page the snippet is on. To narrow that:

  • Pages — show on all pages, or only on (or everywhere except) specific URL paths.
  • Devices — limit to desktop, mobile, or tablet visitors.

What context you collect

The widget can capture a visitor's page, referrer, browser, and device so agents have context (you'll see this in the visitor panel — Knowing your visitors). You choose how much to collect here.

Context capture is always capped by your project's privacy settings — those are the ceiling, so the widget can only collect less than the project allows, never more.

On this page