Как настроить дизайн веб-виджета

1. Выберите базовую тему или настройте свою тему с помощью редактора settings.json. Доступные базовые темы: edna, Threadsim, Halcyon, Adaptive.
2. Нажмите на значок чата в правом нижнем углу для предварительного просмотра веб-виджета.
3. Укажите настройки темы и установите цвета веб-виджета в блоке Настройка темы.
4. Настройте иконку веб-виджета в блоке Иконка виджета.
5. Выберите кнопки веб-виджета в блоке Функциональные кнопки.
6. Если вы настраиваете веб-виджет типа Приветствие, настройте форму приветствия клиентов в блоке Приветствие.

Настройка темы

Нажмите на значок чата в правом нижнем углу и в выпадающем списке Предпросмотр состояния виджета выберите тип виджета для предварительного просмотра:

• Приветствие. Для отправки сообщений в чат клиент должен указать свои данные: имя, номер телефона или email.
• Чат с клиентом. Клиент может отправлять сообщения в чат без указания своих данных.

Если вы выбрали одну из базовых тем, выберите цвета веб-виджета с помощью цветовой палитры или укажите HEX-коды необходимых цветов в следующих настройках:

Настройка	Описание
Основной базовый цвет	Укажите основной базовый цвет для элементов: фон значка веб-виджета, фон сообщений клиента, фон поля для ввода сообщений, границы кнопок, цвет текста кнопок.
Дополнительный базовый цвет	Укажите дополнительный базовый цвет для элементов веб-виджета: фон области предварительного просмотра вложений и цитируемых сообщений и границы кнопок и цвет текста кнопок при наведении на них курсора.
Цвет текста	Укажите цвет текста сообщений и текста в шапке веб-виджета.
Цвет дополнительного текста	Укажите цвет дополнительного текста для элементов: значок для закрытия чата, текст в текстовых полях, системные сообщения.
Цвет линий	Укажите цвет линий веб-виджета для фона сообщений агента и границ текстовых полей.
Фон виджета	Укажите цвет для следующих элементов: фон веб-виджета, текст области предварительного просмотра вложений и цитируемых сообщений, текст поля для ввода сообщений, фон шапки веб-виджета.
Ширина	Укажите ширину веб-виджета с единицей измерения. Например, 350 px.
Высота	Укажите высотку веб-виджета с единицей измерения. Например, 500 px.

Для удаления всех настроек нажмите Сбросить настройки темы.

Иконка виджета

Укажите настройки для значка веб-виджета:

Настройка	Описание
Иконка свернутого виджета	Нажмите Загрузить файл и выберите файл, который должен использоваться в качестве значка свернутого веб-виджета. Допустимые форматы: .jpeg, .png, .svg. Максимальный размер файла — 1 МB.
Цвет фона кнопки свернутого виджета	Укажите цвет фона значка свернутого веб-виджета с помощью цветовой палитры или HEX-кода.

Функциональные кнопки

Чтобы добавить кнопку в веб-виджет, установите переключатель в активное положение слева от нее.

Доступные кнопки:

• Кнопка выбора emoji — для использования emoji в тексте сообщения.
• Кнопка отправки сообщения — для отправки сообщений.
• Кнопка отправки вложения — для прикрепления к сообщению изображений или файлов.
• Кнопка записи голосового сообщения — для записи и отправки голосовых сообщений.

Приветствие

Чтобы настроить форму для заполнения данных клиента, установите переключатель Диалог начального приветствия в активное положение.

Укажите следующие настройки для приветствия:

Настройка	Описание
Заголовок приветствия	Введите текст заголовка приветствия. Например, «Появились вопросы к нам? Давайте обсудим здесь!»
Подзаголовок приветствия	Введите текст, который должен располагаться под заголовком приветствия. Например, «Представьтесь, пожалуйста, и начнем.»
Заголовок после представления	Введите текст заголовка, который должен показываться после того как клиент ввел и отправил свои данные
Подзаголовок после представления	Введите текст, который должен располагаться под заголовком после того, как клиент ввел и отправил свои данные.
Поле «Имя»	Установите переключатель Поле «Имя» в активное положение, чтобы добавить в веб-виджет поле для ввода имени клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения.
Поле «Телефон»	Установите переключатель Поле «Телефон» в активное положение, чтобы добавить в веб-виджет поле для ввода мобильного телефона клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения.
Поле «Email»	Установите переключатель Поле «Email» в активное положение, чтобы добавить в веб-виджет поле для ввода электронной почты клиента. При необходимости установите флажок Обязательно, чтобы сделать поле обязательным для заполнения.
Текст кнопки «Представиться»	Введите текст, который должен располагаться на кнопке для отправки данных клиента.