Colours, font and theme

The widget takes on your brand colour, your font and, if you like, a whole set of colours of your own. In doing so it recalculates until every text stays readable on every surface. You choose your colour, the widget takes care of the contrast.

You will find all settings on this page under /app/projects/{id} in the Appearance tab, section Brand. The exception is the colour scheme (light, dark, automatic): it is in the Installation tab under Basics.

The design assistant

At the top of the Brand section an assistant takes you through the design in four steps:

1. Look – 18 ready-made templates, filterable by Light, Dark, Professional, Playful, Cosy, Cool and Minimal. Among them are, for example, Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit and Espresso.
2. Colours – primary colour and accent, quick picks from eight colour pairs and the choice of surfaces: default, light, dark or custom.
3. Shape – window style, corner radius, shape and size of the launcher.
4. Done – a summary.

The assistant does not save anything itself. It only fills the fields below it; nothing is saved until you press Save. The thumbnail in the assistant is a sketch. You can see the real widget with your values in the preview of the Widget home screen section.

For fine-tuning, expand All settings one by one. Font and custom CSS are only available there.

The fields

• Primary colour – your brand colour as #rrggbb. It colours the launcher, the send button, links, the focus and (mixed) your visitors' bubbles. Without a value of your own: violet #6D28D9 in the light theme, #9B7BFF in the dark one.
• Accent – a second colour as #rrggbb, for example for counters and highlights. Without a value of your own: #BE185D light, #FF6B8A dark.
• Corner radius (px) – 0 to 28. 0 is square. Default 12.
• Font family (CSS) – a CSS value such as Inter, system-ui, sans-serif, 120 characters at most. The widget does not load any font files. So use a font your page loads anyway, or a system font. Empty means: the device's system fonts.
• Templates – one click fills colours, surfaces, radius, launcher and style at once. Nothing is saved until you press Save.

Only colours in the form #rrggbb with six digits are valid. Short forms such as #f00 or rgb(…) are discarded, and the default applies instead.

Surfaces and text

Under Surfaces and text you can set five further colours if needed. Each has a custom colour tick box:

• Background – the surface of the window.
• Bubble surface – the bubbles of your team and of the assistant.
• Text – the text colour.
• Secondary text – times, notes, second lines.
• Rules – dividing lines and borders.

Without the tick the widget uses the set of colours that matches the website, light or dark. The value in the field is then only a starting point, not a readout. With the tick your colour applies.

If you only set a background of your own, the widget derives the rest from it: bubble surface, text, secondary text and rules.

Readability: what the widget recalculates

Customers choose their brand colour, not a readable colour. That is why the widget checks every combination of text and surface for a contrast ratio of at least 4.5:1. That is the threshold from WCAG 2.x for normal text.

• Text on your brand colour (for example in the send button) is automatically set to white or near-black, whichever is more readable.
• Your brand colour as a text colour (links, highlights) is lightened or darkened in small steps until 4.5:1 is reached. The surfaces keep your colour unchanged, that is, the launcher and the send button.
• Your visitors' bubble is a mix of brand colour and background. If the contrast is not enough, the widget puts less brand colour into it.
• Your own text and secondary text colours go through the same check, against every surface they appear on.

What was recalculated is shown in your account directly below the form, in the line Recalculated so the text stays readable. A light yellow as a text colour therefore looks darker in the widget than you entered it, and you can see why there.

On your page you can also query the measured values yourself:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Light, dark or like the website

Under Installation → Basics → Widget colour scheme you choose:

• match the website (else the visitor’s system) – default. The widget checks whether your page is light or dark and adapts.
• light – always light.
• dark – always dark.

With the automatic choice, the widget looks at the following, in this order:

1. the background colour of your page in the middle of the screen,
2. the CSS value color-scheme on <html>, if it is exactly dark or light,
3. common switches on <html> or <body>, such as the class dark or data-theme="dark",
4. finally, the visitor's system setting.

If your page switches between light and dark, the widget follows. It also checks again when the window is opened.

In code you set the theme on the snippet or at runtime. This takes precedence over the account setting:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

With setTheme the widget remembers the choice in the visitor's browser. setTheme('auto') removes it again. That fits a light/dark switch of your own on your page.

Setting colours in code

For individual pages, such as a campaign, you can set the brand on the snippet or at runtime. The field names are:

• primary, accent – brand colour and accent,
• bg, surface, text, textDim, line – the five surfaces,
• onPrimary – text colour on the brand colour (automatic otherwise),
• radius – 0 to 28,
• font – CSS font value,
• launcher and stil – see The launcher and Chat window.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand recalculates contrast and derived colours immediately, without rebuilding the widget. null removes a value again, and the default applies.

On the snippet the attribute is called data-rc-brand and takes JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Important – which wins, snippet or account? The snippet your account generates already carries your brand colour, radius, and the shape and size of the launcher. That is only the initial state, so that the launcher appears in the right colour straight away. As soon as the widget has the settings from the server, your account applies in full.

If, however, you write any further field into data-rc-brand, for example accent, stil or a label, the brand in the snippet counts as this page's own brand. It then beats your account. From your account, only the display “Only via your own links” still applies on this page. In addition, the page does not take part in any A/B tests.

If you change the brand colour in your account, copy the embed snippet under Installation again afterwards. Otherwise the old colour flashes up briefly while the page loads.

How the snippet itself works and which other ways there are (window.ReactiveChatSettings, ReactiveChat('boot', …)) is described in Technical integration.

Custom CSS

Under All settings one by one → Custom CSS you write CSS that is applied last, after all other rules.

• 20,000 characters at most.
• @import is removed, both on saving and in the widget.
• The CSS only takes effect inside the widget. It runs in a sealed-off area (shadow DOM) and cannot change your page. Conversely, your page's CSS does not reach the widget. This is the right place for it.
• The widget enforces two rules again afterwards: the visible focus ring for keyboard users and the close button in the header. Styling away the way out of the chat sets a trap for keyboard users.
• The widget's internal class names are not a guaranteed interface. Check your CSS in the preview after changes.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

In code the same works with customCss, for example in ReactiveChat('boot', { customCss: '…' }) or as the attribute data-rc-custom-css.

Logo in the window header

The easiest way is to enter the logo in your account: Project → Appearance → Brand, field Logo (address). It then appears in the header of the chat window, at the latest one minute after saving.

In code, logo also lets you set the height, alternative text and position, for example the logo in the launcher. A logo set in code takes precedence over the account field:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src – an address with https:// or an image as data:image/…. A small SVG as a data: address saves a request.
• alt – alternative text.
• height – height in pixels, 12 to 40, default 20.
• placement – header (header, default), launcher (in the launcher) or both.

The logo on the home screen, on the other hand, is easy to set in your account, see The chat's home screen.

If something looks different than expected

• The colour is darker or lighter than entered: that is the contrast protection. The Recalculated line below the form names what was adjusted.
• Changes in your account do not arrive: does your snippet contain a data-rc-brand with further fields? Then the snippet wins. Also, after saving it takes up to a minute.
• A different colour flashes up briefly while loading: copy the snippet again after a colour change.
• The font has no effect: does your page load the font? The widget does not load any font files.