Внешний вид виджета настраивается в Песочнице на вкладке «Дизайн». Все изменения сохраняются автоматически, а превью справа обновляется сразу — оформление можно подбирать «на лету».
Тема
Три варианта внешнего вида:
- Светлая — светлый чат, нейтральный вид. Подходит большинству сайтов.
- Тёмная — тёмный чат, хорошо смотрится на тёмных сайтах.
- Своя — ваш фирменный цвет: светлая тема с цветной шапкой под бренд.
Цвет бренда
Для темы «Своя» задайте акцентный цвет в формате HEX (например, #2563EB). Он применяется к шапке чата и кнопке-иконке, чтобы виджет совпадал с фирменным стилем сайта.
Вид кнопки
Как виджет выглядит на сайте, пока чат закрыт:
- Кружок — круглая кнопка в углу. Вариант по умолчанию.
- Строка — поле ввода внизу экрана. В нём по очереди печатаются ваши «Подсказки», так что посетитель сразу видит, о чём можно спросить. По клику строка раскрывается: над ней появляются подсказки-кнопки, и можно написать свой вопрос. После отправки открывается обычный чат с приветствием AI-агента и сообщением посетителя.
На телефоне строка занимает почти всю ширину экрана и сворачивается в кружок, когда посетитель начинает листать страницу, чтобы не мешать чтению. Когда срабатывает триггер, строка разворачивается снова, а сообщение появляется над ней. Нажатие на кружок открывает чат целиком. На компьютере строка стоит справа внизу и не сворачивается.
Остальные настройки общие для обоих видов: тема, цвет, подсказки, приветствие, триггеры, отступ снизу. Переключение вида ничего из них не меняет.
«Строка» доступна на платных тарифах. Если тариф сменился на бесплатный, выбор сохраняется, а на сайте показывается кружок.
Иконка чата
Кнопка-лаунчер в углу сайта, по которой посетитель открывает чат. Можно выбрать тему иконки (светлая, тёмная или своя) и её цвет. При виде «Строка» это кружок, в который строка сворачивается на телефоне.
Отступ кнопки снизу
Расстояние от нижнего края экрана до кнопки чата, в пикселях, отдельно на телефоне и на компьютере. По умолчанию 16 и 20.
Если на сайте есть закреплённое нижнее меню и кнопка чата его закрывает, увеличьте отступ на высоту этого меню с небольшим запасом. Например, при меню высотой 56 px поставьте на телефоне 72. Всплывающие подсказки поднимутся вместе с кнопкой. Допустимы значения от 0 до 300.
Отступ действует на сайте, где установлен виджет; в Песочнице и по публичной ссылке кнопки над сайтом нет, поэтому там изменение не видно.
Фото профиля
Аватар агента в шапке чата. Загрузите логотип или картинку — JPG, PNG или SVG, до 1 МБ; принимаются также WebP и GIF. Обычную картинку перед сохранением можно кадрировать — msg8 покажет окно обрезки; SVG сохраняется как есть.
💡 Проверяйте виджет на фоне реального сайта, на светлом и тёмном. Превью в Песочнице показывает результат мгновенно.
Что дальше
Приветствие и кнопки-подсказки настраиваются на соседней вкладке «Контент». Готовы показать виджет посетителям — см. «Установка виджета на сайт».