Настройка внешнего вида веб-чата с помощью Webchat Playground

Webchat Playground помогает вам настраивать внешний вид и поведение вашего агента веб-чата. Интуитивно понятный интерфейс позволяет изменять цвета, шрифты, миниатюры и многое другое, чтобы соответствовать фирменному стилю вашего бренда. В этой статье описывается, как использовать Webchat Playground для создания и управления темами, а также экспорта стилей в форматах JSON или HTML.

Интерфейс Webchat Playground

Удобный интерфейс Webchat Playground помогает вам определить внешний вид и стиль вашего веб-чата. Вы можете легко вносить изменения и сразу видеть их результат в реальном времени.

Интерфейс состоит из трех основных областей:

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

  2. Средняя панель показывает предварительный просмотр выбранной или редактируемой темы.

  3. Правая панель позволяет переключаться между вкладками JSON и Фрагмент кода. Представление JSON предоставляет текущие стили в виде массива JSON, который можно вставить в существующий веб-чат. Представление фрагмента кода содержит пример HTML веб-чата со встроенными стилями.

Снимок экрана пользовательского интерфейса Webchat Playground, на котором показаны доступные темы, панель предварительного просмотра и пример JSON.

Этот пример пользовательского интерфейса показывает:

  1. В левой панели — редактор стилей, где вы редактируете или создаете тему.

    Разделы включают Общий, Окно отправки, Окно предложений, Аватар и Сообщение. Редактор также включает проверку доступности для всех соответствующих разделов. Вы сохраняете и удаляете действия в верхней части.

  2. В правой панели находится вкладка «Фрагмент кода», отображающая пример HTML. Переключитесь на вкладку JSON, чтобы просмотреть образец JSON.

Снимок экрана пользовательского интерфейса Webchat Playground с редактором стилей тем, панелью предварительного просмотра и вкладкой «Фрагмент кода».

Использование предустановленных тематик или создание своих собственных тем

Webchat Playground предлагает предустановленные темы, демонстрирующие различные возможности настройки для веб-чата. Эти тематики дают отправную точку при создании новой темы. Вы также можете создавать новые тематики для своих индивидуальных потребностей и сохранять их для будущего использования.

Просмотр темы

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

Создание новой темы

Для создания новой темы:

  1. Выберите Добавить тему на левой панели.
    Левая панель становится редактором стилей, где можно вносить изменения.
  2. Введите имя темы.
  3. Выберите Сохранить.

Редактирование темы

Для изменения существующей темы:

  1. Выберите значок карандаша рядом с названием тематики в левой панели.
  2. Внесите изменения в редакторе стилей.
  3. По завершении выберите Сохранить.

Удаление темы

Чтобы удалить существующую тему:

  1. Откройте тематику в режиме редактирования.
  2. Выберите значок удаления (корзину) вверху.

Экспорт стилей

Для экспорта стилей:

  1. Выберите желаемую тематику в средстве выбора темы.
  2. Выберите вкладку JSON на правой панели.
  3. Скопируйте весь текст из представления и вставьте его в HTML вашего веб-чата с помощью переменной styleOptions.

Экспорт фрагмента кода HTML

Для экспорта фрагмента кода HTML:

  1. Выберите желаемую тематику в средстве выбора темы.
  2. Выберите вкладку Фрагмент кода на правой панели.
  3. Сохраните всю HTML-разметку из представления как файл с расширением .html.
  4. Отправьте HTML-файл на веб-сервер.

Пример HTML

В примере фрагмента кода HTML представлено плавающее мини-приложение веб-чата с примененными выбранными стилями.

Снимок экрана плавающего мини-приложения веб-чата с примененными пользовательскими стилями.

  • Last updated on