Настроить дизайн диалогов

Для настройки интерфейса диалогов перейдите на вкладку Дизайн редактора бота.

Вкладка Дизайн

На вкладке Дизайн вы можете задавать настройки на панели слева и сразу же видеть их применение в диалоге справа. Диалог содержит все элементы, которые могут быть добавлены в бот - просмотрев его, вы увидете, как будет выглядеть ваш диалог не только сейчас, но и при изменении схемы.

Обратите внимание, что область просмотра содержит вкладки Чат и Список. На вкладке Список вы увидете применение стилей для списка ранее начатых диалогов.

Интерфейс

В блоке Интерфейс содержатся настройки для всего диалога и списка диалогов.

Table 1. Настройки блока Интерфейс

Подсказка ввода

Текст, который будет указан в поле ввода диалога

Фон чата

Общий фон чата и списка чатов

Для задания цвета вы можете:
  • Выбрать вариант из предложенных

  • Задать цвет на палитре

  • Ввести HEX-код цвета

Текст

Цвет текста в списке, а также цвет заголовка, даты, времени, подсказки ввода и пр.

Границы UI

Цвет разделительных линий между названием, диалогом и полем ввода

Ошибки

Цвет фона сообщений об ошибке, любого ошибочного поля ввода на форме, а также фон сообщения с ошибкой загрузки файла

Текст ошибки

Цвет текста в элементах, описанных выше

Акцент

Цвет кнопки отправки сообщения, цвет кнопки Новый диалог и метки новых сообщений

Акцентированный текст

Цвет текста в кнопке Новый диалог

Разделители

Цвет разделителя в заголовке диалога, цвет разделителей в списке диалогов

Шрифт

Шрифт в диалогах и списке

Выбирается из списка. Шрифт задается для всего чата сразу. По умолчанию - Roboto

Размер шрифта

Размер шрифта в диалогах и списке

Размер выбирается на шкале и изменяется пропорционально для всех элементов чата сразу

Блок Интерфейс

Заголовок

В блоке Заголовок вы можете настроить внешний вид заголовка:
  • Отключить – кнопка позволяет убрать заголовок из окна чата. Чтобы вернуть заголовок, нажмите кнопку Подключить

  • Логотип – изображение в заголовке чата. Для смены изображения нажмите кнопку Загрузить, выберите изображение и откройте его. Изображение появится в логотипе заголовка чата. Для возвращения к стандартному логотипу нажмите Удалить.

Блок Заголовок

Сообщения бота

В блоке Сообщения бота вы можете настроить сообщения бота и оператора.

Table 2. Настройки блока Сообщения бота

Фон

Цвет фона списков и строк ввода в сообщениях бота и оператора

Для задания цвета вы можете:
  • Выбрать вариант из предложенных

  • Задать цвет на палитре

  • Ввести HEX-код цвета

Текст

Цвет текста сообщений бота и оператора

Сообщения

Цвет фона сообщений бота и оператора

Акцент

Цвет различных элеметов в сообщениях бота или оператора, например: кнопок, ссылок, текста в списке выбора и пр.

Акцентированный текст

Цвет текста в кнопках и списках в сообщениях бота и оператора

Разделители

Цвет разделителей для формы ввода и списков в сообщениях бота и оператора

Аватар

Аватар для сообщений бота или оператора

Для смены изображения нажмите кнопку Загрузить, выберите изображение и откройте его. Изображение появится в аватаре. Для возвращения к стандартному аватару нажмите кнопку Удалить.

Блок Сообщения бота

Сообщения респондента

В блоке Сообщения респондента вы можете настроить сообщения респондента.

Table 3. Настройки блока сообщения респондента

Фон

Цвет фона в сообщениях респондента

Для задания цвета вы можете:
  • Выбрать вариант из предложенных

  • Задать цвет на палитре

  • Ввести HEX-код цвета

Текст

Цвет текста в сообщениях респондента

Акцент

Цвет ссылок в сообщениях респондента

Блок Сообщения респондента

Пользовательский CSS

Если описанных настроек недостаточно, вы можете прописать стили в правилах CSS в блоке Пользовательский СSS.

Перед применением стилей Bot.one обязательно проверит код и подчеркнет ошибки. 

Note
Правила, написанные в CSS, являются более приоритетными - то есть перекрывают правила, указанные в блоках
Блок Пользовательский СSS

Сбросить настройки интерфейса

Чтобы сбросить настройки дизайна в диалогах, нажмите кнопку Сбросить настройки дизайна в правом верхнем углу.

Кнопка Сбросить настройки дизайна

Статья помогла вам?