Чем мы можем помочь?

Кратко опишите вопрос; мы ответим по электронной почте.

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>

Логотип на главном экране, в свою очередь, легко задать в аккаунте: см. Главный экран чата.

Если что-то выглядит не так, как ожидалось

Обновлено: