Чим ми можемо допомогти?

Стисло опишіть питання; ми відповімо електронною поштою.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
На головну

Кольори, шрифт і тема

Колір бренду, акцент, власні кольори поверхонь, радіус кутів, шрифт, світла й темна теми, шаблони та власний CSS — і як віджет забезпечує читабельність тексту.

Віджет використовує колір вашого бренду, ваш шрифт і, за бажанням, цілий набір власних кольорів. Він коригує їх так, щоб кожен текст залишався читабельним на кожній поверхні. Ви обираєте колір, а віджет дбає про контраст.

Усі налаштування з цієї сторінки розташовані за адресою /app/projects/{id} на вкладці Вигляд у розділі Оформлення. Виняток — тема (світла, темна, автоматична): вона на вкладці Встановлення в розділі Основне.

Майстер оформлення

Угорі розділу Оформлення майстер проведе вас через чотири кроки:

  1. Вигляд — 18 готових шаблонів із фільтрами «Світлий», «Темний», «Професійний», «Грайливий», «Затишний», «Холодний» і «Мінімальний». Серед них, наприклад, Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit та Espresso.
  2. Кольори — основний колір та акцент, швидкий вибір із восьми пар кольорів і вибір поверхонь: стандартні, світлі, темні або власні.
  3. Форма — стиль вікна, радіус кутів, форма й розмір кнопки чату.
  4. Готово — підсумок.

Сам майстер нічого не зберігає. Він лише заповнює поля під ним; дані зберігаються тільки після натискання Зберегти. Мініатюра в майстрі — це ескіз. Справжній віджет із вашими значеннями показано в попередньому перегляді розділу Головний екран віджета.

Для точного налаштування розгорніть Усі налаштування окремо. Шрифт і власний CSS доступні лише там.

Поля

Дійсні лише кольори у форматі #rrggbb із шістьма цифрами. Скорочення на кшталт #f00 або rgb(…) відкидаються, натомість застосовується стандартне значення.

Поверхні й текст

У розділі Поверхні й текст за потреби можна задати ще п’ять кольорів. Кожен має прапорець Власний колір:

Без прапорця віджет використовує набір кольорів відповідно до сайту — світлий або темний. Значення поля тоді є лише початковим орієнтиром, а не показником фактичного кольору. Із прапорцем застосовується ваш колір.

Якщо ви задаєте лише власне тло, віджет виводить із нього решту: поверхню бульбашок, текст, другорядний текст і лінії.

Читабельність: що коригує віджет

Клієнти обирають колір бренду, а не колір із гарантованою читабельністю. Тому віджет перевіряє кожну комбінацію тексту й поверхні на контраст щонайменше 4,5:1. Це поріг WCAG 2.x для звичайного тексту.

Що саме скориговано, показано в обліковому записі безпосередньо під формою в рядку Скориговано для читабельності тексту. Тому світло-жовтий текст у віджеті виглядає темнішим за введений колір, і там можна побачити причину.

На своїй сторінці ви також можете самостійно отримати виміряні значення:

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

Світла, темна чи як на сайті

У розділі Встановлення → Основне → Тема віджета можна обрати:

За автоматичного вибору віджет послідовно перевіряє:

  1. колір тла сторінки посередині екрана,
  2. CSS-значення color-scheme на <html>, якщо це точно dark або light,
  3. поширені перемикачі на <html> або <body>, наприклад клас dark чи data-theme="dark",
  4. насамкінець — системне налаштування відвідувача.

Якщо сторінка перемикається між світлою й темною темами, віджет робить те саме. Він також повторює перевірку під час відкриття вікна.

У коді тема задається у фрагменті вбудовування або під час роботи. Це має пріоритет над налаштуванням облікового запису:

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

Через setTheme віджет запам’ятовує вибір у браузері відвідувача. setTheme('auto') знову його видаляє. Це підходить для власного перемикача світлої й темної тем на вашій сторінці.

Задавання кольорів у коді

Для окремих сторінок, наприклад кампанії, оформлення можна задати у фрагменті вбудовування або під час роботи. Назви полів:

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

setBrand одразу перераховує контраст і похідні кольори без повторної побудови віджета. null знову прибирає значення, після чого застосовується стандартне.

У фрагменті вбудовування атрибут називається data-rc-brand і приймає JSON:

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

Важливо: що має пріоритет — фрагмент чи обліковий запис? Фрагмент, створений у вашому обліковому записі, уже містить колір бренду, радіус, форму й розмір кнопки чату. Це лише початковий стан, щоб кнопка одразу мала правильний колір. Щойно віджет отримує налаштування із сервера, повністю застосовуються налаштування облікового запису.

Але якщо ви додаєте до data-rc-brand будь-яке інше поле, наприклад accent, stil або підпис, оформлення у фрагменті вважається власним оформленням цієї сторінки. Тоді воно має пріоритет над обліковим записом. З облікового запису на цій сторінці далі діє лише режим показу «Лише через власні посилання». До того ж сторінка не бере участі в A/B-тестах.

Якщо ви змінюєте колір бренду в обліковому записі, після цього ще раз скопіюйте фрагмент вбудовування з розділу Встановлення. Інакше під час завантаження сторінки ненадовго з’являтиметься старий колір.

Як працює сам фрагмент та які є інші способи (window.ReactiveChatSettings, ReactiveChat('boot', …)), описано в розділі Технічна інтеграція.

Власний CSS

У розділі Усі налаштування окремо → Власний CSS ви пишете CSS, який застосовується останнім, після всіх інших правил.

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

У коді те саме можна зробити через customCss, наприклад у ReactiveChat('boot', { customCss: '…' }) або атрибуті data-rc-custom-css.

Логотип у заголовку вікна

Найпростіше ввести логотип в обліковому записі: Проєкт → Вигляд → Оформлення, поле Логотип (адреса). Він з’явиться в заголовку вікна чату щонайпізніше за хвилину після збереження.

У коді через logo також можна задати висоту, альтернативний текст і розташування, наприклад логотип у кнопці чату. Логотип із коду має пріоритет над полем облікового запису:

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

Натомість логотип на головному екрані легко задати в обліковому записі, див. Головний екран чату.

Якщо щось виглядає не так, як очікувалося

Оновлено: