Интерфейс виджета для посетителя сайта
Окно и шапка
Посетитель открывает popup через кнопку виджета и закрывает его через крестик в шапке. Пока окно загружается, доступна кнопка закрытия на рамке. Во встроенном режиме обычного крестика закрытия нет: сайт может включить крестик сворачивания внутри шапки. Его нажатие только сообщает сайту о намерении свернуть виджет; сайт после этого скрывает wrapper или свою внешнюю панель. Кнопка "Назад" возвращает на предыдущий экран.
В шапке можно начать новый диалог, сменить язык, открыть данные пользователя и скопировать ID диалога. Если версия интерфейса устарела, обновление версии перезагружает виджет.
Диалоги и поиск
В шапке открытого чата кнопка истории открывает компактный список поверх переписки. В нём поиск фильтрует переписки, а строка диалога открывает выбранный чат.
На отдельном экране истории кнопка назад возвращает к списку. В полном списке каждый диалог открывает свою переписку. Поиск находит диалог по доступному тексту, а очистка строки возвращает полный список. Если поиск ничего не нашел, используйте сброс поиска; если диалогов еще нет, доступно создание первого диалога.
Если список не загрузился, повторная загрузка диалогов запрашивает данные заново.
В чате информация о диалоге показывает его данные. Во встроенной истории можно написать в поле быстрого сообщения и отправить его.
Сообщение и ответ
В поле ввода доступны вложения, голосовая запись, эмодзи и отправка сообщения. Если включен выбор элементов страницы, кнопка выбора элемента добавляет к вопросу место на сайте.
При ответе на конкретное сообщение предпросмотр исходного сообщения прокручивает к нему чат. Также можно перейти к сообщению или отменить ответ.
Под сообщением агента могут появляться кнопки действия. В зависимости от настройки кнопка открывает ссылку, передаёт сайту пользовательское действие или отправляет выбранный ответ в диалог. Пока ответ по кнопке обрабатывается, остальные кнопки этого сообщения временно недоступны, чтобы действие не выполнилось дважды.
В оформленном блоке кода кнопка в правом верхнем углу копирует весь код. После нажатия она кратко показывает результат. Длинные строки переносятся для чтения, но копируются в исходном виде.
Вложения
В подготовленном вложении можно открыть изображение или убрать файл перед отправкой. Для аудио доступны воспроизведение и пауза, а также удаление.
В истории изображения открываются через просмотр изображения, видео через просмотр видео, а стикеры через просмотр стикера. Результат распознавания открывается через информацию о вложении, а "Назад" возвращает к сообщению.
Просмотр и ошибки
В просмотре изображения доступны увеличение, уменьшение, сброс масштаба и закрытие. У видео есть отдельная кнопка закрытия.
Во время запуска, загрузки диалогов и загрузки сообщений виджет показывает текущее действие, поэтому пустой экран не нужно принимать за готовое состояние. При подключении могут появляться сообщения «Устанавливаем соединение…» или «Восстанавливаем соединение…». Виджет продолжает попытки автоматически и возвращает чат после восстановления связи.
Если связь потеряна, детали соединения помогают понять состояние. Действие «Скопировать для поддержки» копирует диагностические сведения, которые можно передать специалисту без ручного переписывания ошибок. Оно может появиться для разных этапов:
- создание нового диалога;
- первая загрузка списка диалогов и его фоновое обновление;
- загрузка списка в меню истории, его обновление и отправка быстрого сообщения из истории;
- первая загрузка сообщений открытого чата и их фоновое обновление;
- отправка сообщения, загрузка вложения и получение потокового ответа.
Общую ошибку можно повторить или исправить перезагрузкой. Если ошибка произошла при самом запуске интерфейса, виджет также предлагает повторить загрузку или перезагрузить окно.
Ошибки отправки, потокового ответа, загрузки файла и голосовой записи закрываются через сообщение об ошибке отправки, ошибку ответа, ошибку загрузки и ошибку записи.
Если не загрузилась история открытого чата, повторная загрузка истории восстанавливает сообщения без создания нового диалога.