- Выберите базовую тему или настройте свою тему с помощью редактора settings.json. Доступные базовые темы: edna, Threadsim, Halcyon, Adaptive.
- Нажмите на значок чата в правом нижнем углу для предварительного просмотра веб-виджета.
- Укажите настройки темы и установите цвета веб-виджета в блоке Настройка темы.
- Настройте иконку веб-виджета в блоке Иконка виджета.
- Выберите кнопки веб-виджета в блоке Функциональные кнопки.
- Если вы настраиваете веб-виджет типа Приветствие, настройте форму приветствия клиентов в блоке Приветствие.
Настройка темы
Нажмите на значок чата в правом нижнем углу и в выпадающем списке Предпросмотр состояния виджета выберите тип виджета для предварительного просмотра:
- Приветствие. Для отправки сообщений в чат клиент должен указать свои данные: имя, номер телефона или email.
- Чат с клиентом. Клиент может отправлять сообщения в чат без указания своих данных.
Если вы выбрали одну из базовых тем, выберите цвета веб-виджета с помощью цветовой палитры или укажите HEX-коды необходимых цветов в следующих настройках:
| Настройка | Описание |
| Основной базовый цвет | Укажите основной базовый цвет для элементов веб-виджета: • фон значка веб-виджета; • фон сообщений клиента; • фон поля для ввода сообщений; • границы кнопок; • цвет текста кнопок. |
| Дополнительный базовый цвет | Укажите дополнительный базовый цвет для элементов веб-виджета: • фон области предварительного просмотра вложений и цитируемых сообщений; • границы кнопок и цвет текста кнопок при наведении на них курсора. |
| Цвет текста | Укажите цвет текста сообщений и текста в шапке веб-виджета. |
| Цвет дополнительного текста | Укажите цвет дополнительного текста для элементов: • значок для закрытия чата; • текст в текстовых полях; • системные сообщения. |
| Цвет линий | Укажите цвет линий веб-виджета для фона сообщений агента и границ текстовых полей. |
| Фон виджета | Укажите цвет для следующих элементов: • фон веб-виджета; • текст области предварительного просмотра вложений и цитируемых сообщений; • текст поля для ввода сообщений; • фон шапки веб-виджета. |
| Ширина | Укажите ширину веб-виджета с единицей измерения. Например, 350 px. |
| Высота | Укажите высотку веб-виджета с единицей измерения. Например, 500 px. |
Для удаления всех настроек нажмите Сбросить настройки темы.
Иконка виджета
Укажите настройки для значка веб-виджета:
| Настройка | Описание |
| Иконка свернутого виджета | Нажмите Загрузить файл и выберите файл, который должен использоваться в качестве значка свернутого веб-виджета. Допустимые форматы: JPEG, PNG, SVG. Максимальный размер файла — 1 МB. |
| Цвет фона кнопки свернутого виджета | Укажите цвет фона значка свернутого веб-виджета с помощью цветовой палитры или HEX-кода. |
Функциональные кнопки
Чтобы добавить кнопку в веб-виджет, установите переключатель в активное положение слева от нее.
Доступные кнопки:
- Кнопка выбора emoji — для использования emoji в тексте сообщения.
- Кнопка отправки сообщения — для отправки сообщений.
- Кнопка отправки вложения — для прикрепления к сообщению изображений или файлов.
- Кнопка записи голосового сообщения — для записи и отправки голосовых сообщений.
Приветствие
Чтобы настроить форму для заполнения данных клиента, установите переключатель Диалог начального приветствия в активное положение.
Укажите следующие настройки для приветствия:
| Настройка | Описание |
| Заголовок приветствия | Введите текст заголовка приветствия. Например, «Появились вопросы к нам? Давайте обсудим здесь!» |
| Подзаголовок приветствия | Введите текст, который должен располагаться под заголовком приветствия. Например, «Представьтесь, пожалуйста, и начнем.» |
| Заголовок после представления | Введите текст заголовка, который должен показываться после того как клиент ввел и отправил свои данные |
| Подзаголовок после представления | Введите текст, который должен располагаться под заголовком после того, как клиент ввел и отправил свои данные. |
| Поле «Имя» | Установите переключатель Поле «Имя» в активное положение, чтобы добавить в веб-виджет поле для ввода имени клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения. |
| Поле «Телефон» | Установите переключатель Поле «Телефон» в активное положение, чтобы добавить в веб-виджет поле для ввода мобильного телефона клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения. |
| Поле «Email» | Установите переключатель Поле «Email» в активное положение, чтобы добавить в веб-виджет поле для ввода электронной почты клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения. |
| Текст кнопки «Представиться» | Введите текст, который должен располагаться на кнопке для отправки данных клиента. |