Brand Kit styles

A style is a named look you make once in the Brand Kit, such as "Flash Sale" or "Holiday", and then pick by name. It sets colors, a gradient or image background and corner radius. Anything a style leaves empty keeps the workspace's base look.

Open Brand Kit → Styles to create one. Start from a preset or from blank.

Where a style applies

Where	How to pick it
Announcements	Design tab → Style.
Surveys	Delivery tab → Style.
Tour steps	Step settings → Style (modal, end and banner steps; a tooltip works too, but a picture background can make small text hard to read).
Chat widget	Brand Kit → Chat widget → Chat look → Header style. The style colors the panel header.

You never type colors in a builder: pick a style by name and change it in the Brand Kit. Editing a style changes every item that uses it. If you delete a style, items that used it show the base look until you pick another.

Chat look

Under Brand Kit → Chat widget → Chat look you can also choose the launcher icon (chat, question, smile, or your own image URL) and the colors of visitor and agent message bubbles. Empty keeps the defaults.

Image-only announcements

Choose layout Image only in an announcement's Design tab when a designed picture is the whole announcement.

• Add the image on the Content tab and write alt text (required, for screen readers).
• Design for the size the panel shows for your format: modal 800 × 600, slideout 680 × 400, banner 1600 × 120, popover 640 × 360 pixels. The panel also gives a prompt you can paste into an AI image tool.
• Optional phone image is used under 520 px wide; without it the main image scales down.
• Optional click link opens in a new tab and counts as a click on the announcement.

Banner position

A banner can float over the page (the default), push the page down, or sit in a slot you choose. It can sit at the top or the bottom.

Mode	What happens
Float over the page	Covers the page edge, like before.
Push the page down	The banner is part of the page, so content moves instead of being covered. A fixed header at the top of your page is moved down with it.
Inside my own slot	Add data-jcx-banner-slot to an element on your page and the banner mounts inside it. Without that element it pushes the page down.