Настройка виджета — шаг 1

Архитектура и функциональность первого шага настройки виджета

Экран открывает мастер настройки LiveChat и посвящён внешнему виду оператора в чате. В верхней части расположен заголовок «Настройка виджета» и отметка «Шаг 1 из 5». Основная форма находится в белой карточке, а справа выделена отдельная область предпросмотра.

1. Последовательность настройки

Над карточкой показан индикатор из пяти пронумерованных шагов. Первый шаг выделен зелёным, остальные отображаются нейтральным цветом. Под формой находится кнопка «Далее», обозначающая переход к следующему этапу мастера.

2. Представление оператора

Поля «Имя оператора» и «Должность / Отдел» позволяют задать сведения, которые представляют сотрудника или службу в чате. Примеры «Алексей» и «Служба поддержки» поясняют ожидаемые значения. Между полями расположен блок аватара с круглой заглушкой и кнопкой «Загрузить фото».

3. Цветовое оформление

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

4. Предпросмотр виджета

Справа показан образец чата с зелёной шапкой, аватаром-заглушкой, названием «Оператор» и подписью «Служба поддержки». В области сообщений указано, что приветственное сообщение отсутствует. Нижняя панель содержит значки вложений, документа, смайлика и кнопку отправки. Предпросмотр позволяет оценить композицию виджета рядом с настройками.

Разделение формы и образца чата помогает сопоставить параметры с внешним видом интерфейса. Индикатор прогресса и кнопка продолжения делают первый этап частью понятной последовательности настройки.