Customize the widget appearance

Style the widget with a live preview: Home greeting, background styles, Home cards, launcher position and label, and the portal theme the widget follows.

Style the widget to match your product and check every change in a live preview. This article covers the preview, the Home tab (greeting, background, and cards), the launcher, and where the widget's theme and colors come from.

Customize the widget in Settings > Widget.

Live preview

The settings page shows the real widget in a preview pane, so what you see is what your users get. Switch the preview between Light and Dark to check both. Changes save as you make them and the preview updates.

Theme and colors

The widget uses the same theme as your portal. Set the theme mode (Light, Dark, or Visitor chooses) and colors in Settings > Portal, under Appearance.

Note: The widget does not read your app's own theme setting. If your app is dark and the widget is light, set the theme mode in Settings > Portal > Appearance.

Home tab

The Home section sets what visitors see first. Home appears when two or more sections are on.

Greeting and Subtitle: for example "Hi {name}" and "How can we help?". Use {name} to greet signed-in users by first name.
Background: the style behind the greeting (see below).
Workspace logo: shows your logo in the Home header (set the logo under Settings > General).
Team avatars: shows teammate faces in the Home header.
Home cards: up to 8 cards, in the order you choose.

Background styles

Style	Description
Plain	A flat background color
Gradient	A gradient between two colors you choose (From and To)
Pattern	A subtle pattern: Mesh, Dots, Grid, or Waves
Image	An image you upload

If you do not set custom colors, the background follows your brand color and adapts to light and dark mode. Custom colors apply the same in both themes, so pick colors that work in either.

Home cards

Add cards that link visitors to what they need:

Card	What it does
Feedback	Opens the Feedback tab
New conversation	Starts a chat
Article search	Searches your help center
Latest updates	Shows recent changelog entries
Link	Opens a URL you choose

Each card can have a custom title and subtitle, and an audience: Show to everyone, Signed-out visitors only, or Signed-in users only.

Launcher

Under Layout:

Button position: bottom right or bottom left.
Button label: text next to the launcher icon, for example "Chat with us". Leave it blank for an icon-only circle.
Launcher greeting: a bubble beside the launcher that invites a chat. Leave it blank for none.

To use your own button instead of the launcher, see Install the widget.