Настройка внешнего вида чата

Визуальное оформление чата — важнейший этап интеграции, так как виджет должен гармонично вписываться в дизайн вашего сайта и быть удобным для пользователей. В DiveChat предусмотрен гибкий конструктор, позволяющий настроить каждую деталь: от цвета кнопок до условий отображения активных приглашений. Ниже приведена подробная инструкция по кастомизации вашего чата.

Шаг 1. Переход к настройкам внешнего вида

1. Зайдите в раздел «Управление каналами» (иконка шестерёнки в боковом меню).
2. В списке «Подключенные каналы» найдите нужный ресурс и нажмите кнопку «Настроить».
3. Выберите пункт меню «Настройка виджета».

Здесь вы увидите четыре подраздела для полной кастомизации:

1. Дизайн — визуальное оформление (цвета, темы, расположение кнопки и стиль иконок).
2. Настройка текстов — управление всеми надписями: от заголовков на экране приветствия до призывов к действию на кнопках.
3. Дополнительные ссылки — интеграция переходов на ваши внешние платформы и социальные сети.
4. Политика конфиденциальности и 152-ФЗ — важный юридический блок для размещения ссылки на документ об обработке персональных данных, чтобы ваш чат полностью соответствовал законодательству.

Шаг 2. Настройка базовых элементов

Логотип

Загрузите изображение, которое станет «лицом» вашего чата. Оно будет отображаться на экране приветствия и использоваться в качестве аватара оператора по умолчанию.

Кнопка (Триггер виджета)

Настройте стиль и расположение кнопки, которая открывает чат:

• Выберите форму и иконку.
• Определите сторону экрана (слева или справа).
• Укажите смещение по горизонтали и вертикали, чтобы кнопка не перекрывала важную информацию или другие кнопки на вашем сайте.

Окно активного приглашения

Это всплывающее облачко с текстом, которое привлекает внимание:

• Выберите подходящий дизайн окна.
• Опционально включите функцию «Скрывать триггер-кнопку» при появлении приглашения, чтобы не загромождать интерфейс.
• Примечание. Сами сценарии показа (через сколько секунд выплывет окно) настраиваются в отдельном разделе — «Автоматизация».

Шаг 3. Кастомизация экрана приветствия

Экран приветствия — это то, что видит пользователь до начала диалога. Чтобы он работал, включите его в настройках и заполните следующие поля:

1. Заголовок. Например, «Как мы вам можем помочь?».
2. Текст под заголовком. Краткое описание или приветствие.
3. Заголовок других платформ. Текст блока ссылок (например, «Мы на других платформах»).
4. Текст приглашения в чат. Фраза над кнопкой старта (например, «Или можете написать в чате»).
5. Кнопка начала диалога. Текст на самой кнопке (например, «Написать» или «Начать чат»).

Шаг 4. Цветовая схема и фон

В DiveChat доступно несколько готовых тем и возможность создать свою:

• Стандартная (светлая) и Темная.
• Стеклянная и Контрастная.
• Своя. Позволяет вручную задать HEX-коды для всех элементов под ваш брендбук.

Настройка фона чата:

В окне диалога можно оставить цвет по умолчанию (из темы), выбрать произвольный цвет или загрузить изображение (до 10 МБ), которое станет подложкой для сообщений.

Шаг 5. Дополнительные настройки

В нижней части панели настроек доступны важные технические опции:

• Скрыть баннер DiveChat. Позволяет убрать подпись сервиса внизу виджета.
• Уведомления. Опции «менять вкладки» (мигание заголовка в браузере) и «включить звук» при входящих сообщениях.
• Офлайн-режим. Включите или выключите возможность пользователей писать сообщения, когда ни одного оператора нет в сети.
• Открывать окно чата при ответе оператора. Полезная опция для удержания внимания.

Шаг 6. Интерактивное превью

В процессе настройки в нижней части экрана вам будет доступно интерактивное превью. Любое изменение цвета или текста мгновенно отображается на макете, позволяя вам оценить результат до сохранения.

Если во время настройки внешнего вида виджета DiveChat у вас возникли какие-либо сложности, обращайтесь к нашим специалистам — мы всегда рады помочь!