Appearance templates

The cookie banner and the chat widget each wear an appearance template: the layout, shape, colours, type and motion they are drawn with. Pick one of ConnectWiz's ready-made templates, or build your own from your choices and use it on one site or on all of them.

A template is only the look. The words stay where they are — the banner's texts per language, the widget's translations — so one template works on a Turkish and a German site alike.

Where to find it

• Cookie banner: Settings → Integrations → Website → your site → Cookie consent → Look → Change the look.
• Chat widget: Settings → Widget → Appearance → Look → Change the look.

Both open the studio: the templates on top, the editor on the left, a live preview on the right. The preview is drawn by the real banner and the real widget, with your unsaved changes — switch between desktop and mobile, the first layer and the preferences, and (for a template that follows the visitor's device) light and dark.

Ready-made templates

Cookie banner	Chat widget
Corner card (default) · Full bar · Minimal · Glass · Dark · Centre · Classic (the look before templates)	Modern (default) · Minimal · Soft · Corporate · Dark · Glass · Bubbles · Modern (previous)

Ready-made templates use your brand colour (the widget's primary colour), so they look like yours from the start. They never change under you: a new version of a template comes with a new name.

Build your own

Click a template, change what you want and Save as a new template with a name. A ready-made template is never edited in place; your own ones are saved with Save.

Cookie banner: layout (full-width bar, corner card, centre, slim bar, floating bar) and position, width, what phones show, the title and your logo; the button style (filled, outlined, soft), corners and arrangement; the re-open button (icon, size, side, distance from the edge, its name on hover); corners, shadow, border, glass surface, spacing, font (system or your site's own), text size, motion and theme (light, dark, or following the visitor's device).

Chat widget: the launcher (circle, rounded square, pill with text, tab on the bottom edge, or hidden), its size, icon, side, distances and a single pulse; the window (floating, side drawer, centre, full screen) with its width and height, what phones show, the header's content and style (solid, gradient, background image, plain) and the faces beside the title (none, the bot's picture, or up to three team members' photos); message bubbles (rounded, square, with a tail; the visitor's bubble in the accent, soft or outlined), when the message time shows (on hover, always, hidden), the chat background, the message box and its send button (icon, or icon and text); and the same shape, type, motion and theme choices.

Fonts in the widget: besides the system font and your site's own, the widget can use Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito or Noto Sans. ConnectWiz serves these files itself (no request to Google Fonts or any other font host), and a visitor's browser downloads only the letters the page actually shows. Arabic and Hebrew text is drawn with Noto Sans in every family. The cookie banner uses only the system font or your site's font, so it never makes a font request.

Team photos in the header: the widget shows up to three active agents who uploaded a profile photo, by name in the format you set for agent names. It never shows who is online. An agent without a photo is not shown; with no photos at all, the row is not drawn.

Colours: each colour is your own, your brand colour, or (for text on a colour) automatic — black or white, whichever reads. The dark theme's colours can be left to follow the light ones.

What a template cannot change

For the cookie banner, the law decides some things, and no template can change them: Accept all, Reject all and Preferences always look the same — one style, one size, side by side — there is no setting for one button alone. No box is ticked in advance, the banner never blocks the page, and the re-open button stays (at least 32 px).

For both, every text must be readable: at least 4.5:1 against its background, in each theme the template uses. A colour that is not readable cannot be saved; the studio shows the closest colour that is, and one click uses it. If your brand colour changes later and a pair stops reading, the text is drawn in black or white instead.

Changing the look is never a "material change" of the banner: no visitor is asked for consent again.

Custom CSS (chat widget, Pro plan)

For what the settings cannot reach, a chat-widget template of your own can carry custom CSS: open the template in the studio and write it in Custom CSS (advanced). It is saved with the template, so each site wears the CSS of the template assigned to it. Ready-made templates have none: saving one with CSS makes a new template of yours.

The CSS is drawn inside the chat widget only, after the widget's own styles; it cannot change the rest of your page. The preview shows it as you type. To keep visitors safe, a template's CSS is refused when it contains @import, a url() that is not an inline data:image picture, backslash escapes, expression(, behavior: or -moz-binding, and it can be at most 10 KB. Every change is recorded in the audit log (by size and fingerprint).

Custom CSS is part of the Pro plan and above, and open during a trial. The cookie banner never takes custom CSS. If your plan changes, the CSS you saved is kept but no longer drawn. A rule can hide parts of the widget, including notices visitors must see, so check the preview before you use it.

Use it

• Use on this site / Use for the workspace puts the template you are editing to work at once.
• Where it is used sets the workspace default and, per site, a template of its own or "Follow the workspace". A site without its own wears the workspace's; a workspace without one wears the platform default.
• A template that is used somewhere asks what those places wear instead before it is deleted.
• Export saves a template as a file; Import brings one in (for example from another workspace you manage).

The look before templates

Sites that had chosen no template moved to the new defaults (Corner card, Modern) with their own colours and side kept. Go back to the previous look makes the look you had — colours and position included — a template of its own and uses it.

A hidden launcher

With the hidden launcher the widget has no button of its own: open it from your page with window.cwz.chat.open() or by adding data-cwz-chat-open to any link or button.

<button data-cwz-chat-open>Chat with us</button>

With an AI agent (MCP)

The same library is in the ConnectWiz MCP server: list_appearance_presets, list_appearance_templates, get_appearance_template, upsert_appearance_template and assign_appearance_template (writing needs a key with mcp:write). The same rules apply; deleting is done in the panel.