Branding the widget

The widget is meant to look like part of your site. Everything below is set on your account and served to the widget when it loads — there is nothing to configure in your page beyond the script tag.

What you can set

Brand colour and the contrast colour used for text on top of it. Used for the launcher, the send control and your own message bubbles.

Surface colour, the background of the panel itself.

Corner radius, so the widget matches how rounded the rest of your interface is.

Font family. Left unset, the widget uses your page's font, which is usually what you want.

What you cannot set

Arbitrary CSS. The widget renders inside a closed shadow root, which is what guarantees your styles and its styles cannot interfere with each other — your page cannot break the widget's layout, and the widget cannot leak styles onto your page. The trade is that customisation happens through these settings rather than through a stylesheet.

If you need something the settings do not cover, tell us what it is. Adding a setting is straightforward; letting arbitrary CSS in is not, because it removes the guarantee that makes the widget safe to drop onto any page.

Contrast

Set a contrast colour that genuinely contrasts with your brand colour. The widget will use what you give it, and a pale brand colour with white text is unreadable for some of your customers and fails accessibility requirements that some of your buyers have to meet.

If you are unsure, send us your brand colours and we will pick a pairing that meets the standard.

Requesting changes

Email support@usekaras.com with what you want changed. Branding lives on your account, not in your page, so a change takes effect without you touching your site. Your widget picks it up within a few minutes.