మేమెలా సహాయపడగలం?

విషయం ఏమిటో సంక్షిప్తంగా చెప్పండి — ఇమెయిల్ ద్వారా తిరిగి సంప్రదిస్తాం.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
ప్రారంభ పేజీకి వెళ్లండి

Colours, font and theme

Brand colour, accent, your own surface colours, corner radius, font, light and dark, templates and custom CSS – and how the widget makes sure every text stays readable.

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

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:

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.

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:

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:

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.

.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>

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

చివరిగా నవీకరించినది: