Styling the chat widget

Plan requirement

Subscription Any plan
Access Admin

Appearance settings on the Style tab, the colours and shapes it covers, where they stop, and the API that takes over from there.

Live chat is on its way out: Zendesk removes it on 31 January 2028 and no longer sells it to new customers. What is below still works until then, but any effort you put into it has an end date.

What you can set

  1. Open the widget in Admin Center under Channels, then Messaging and social > Messaging, and go to the Style tab.
  2. Set the colours. Message color is the bubble around the customer's messages and Action color is buttons and choices; both take a hex value or a colour picker.
  3. Set the position: Bottom left or Bottom right, with an offset from the bottom and the side. The default is 16 px from each.
  4. Set the shape with the Border slider, from straight corners at 0 px to curved corners at 20 px, and pick the launcher shape.
  5. Add the Logo, a JPG or PNG shown at the top of the frame, and the Title beside it, which is either your business name or a call to action such as "Contact us".
  6. Save and reload your site.

Position and mobile

The widget sits in a corner, and on a phone it covers a meaningful part of the screen. Check it against your own mobile layout, particularly anything fixed at the bottom of the page such as a cookie banner or an add-to-basket button.

A widget covering the button that makes you money is a real cost and easy to miss on a desktop.

Beyond the settings

Where the Style tab stops, the widget API begins: zE("messenger:set", "customization", { theme: … }) sets colours at runtime, down to the launcher, the header, each side's message bubbles, the action buttons and the background. The same API shows and hides the widget per page and reacts to events.

That is developer work and a different level of effort from a settings page. For most sites the Style tab is enough; reach for the API when you have a specific behaviour in mind, not to make it look slightly different.

Keep it recognisable

Matching your brand is good. Making it invisible is not: visitors have to be able to find it, and a widget styled into the background gets no conversations and looks like a success in the settings page.

See also

Was this article helpful?

0

Still stuck?

Our support team will take a look with you.

Comments

0 comments

Article is closed for comments.