Qubot Customizing

Webchat settings

A guide to customizing your bot's appearance to match your brand's color scheme.

In customizing the appearance of the bot, those brands that have already developed a color scheme and they need the appearance of the bot to match this scheme will be especially interested.

It's easy to do. Select your bot, click Setup from the left panel.

---

The following options are available:

Icons

Logo - an icon that is displayed in the list of bots and the button to start the bot.




Agent - an icon that is displayed in every bot message.




Human - an icon that is displayed in each message of the user.

Texts

Bot name - the bot's name is displayed in the upper left corner.

Agent name - the name of the bot from which messages will be sent.

Info text - text that provides specific information to the user is displayed at the top of the bot next to the bot's name.

Size and position

Size - selecting a predefined bot window size: normal, long and huge. To set custom dimensions, select custom and enter the desired dimensions in the width and height fields.

Position - choose an angle to position your bot. В полях слева вверх установите отступы для окна бота.

Styles

Here you can choose a ready-made bot style that will match your brand's color scheme.

Custom

Here you can customize your bot view.

The following options are available:

Window

Shadow - setting the shadow of the bot window. The first parameter specifies the movement of the shadow to the right and down. The second parameter sets the shadow blur level. The third is the color of the shadow.

Header

Here you can edit the header of the bot window

Fill - bot window header background. The first parameter sets the color, the second - the transparency.

Border - bot window border. The first parameter sets the color, the second - the width of the border.

Text - bot name in header. The first parameter specifies the font color, the second parameter specifies the font size, and the third parameter specifies the height of the font line.

Info - caption in the header. The first parameter specifies the font color, the second parameter specifies the font size, and the third parameter specifies the height of the font line.

Radius - the degree of roundness of the upper right and left corners of the bot window.

Shadow - bot window header bar shadow. The first parameter sets the shadow offset down, the second parameter sets the degree of blur, the third - the color.

Close - setting the colors of the update and close buttons of the bot. The first parameter sets the normal color of the buttons, the second parameter sets the color of the buttons when hovering over them.

Тело бота

Здесь вы можете отредактировать область переписки бота

Заполнение - фон тела бота. Первый параметр задает цвет, второй задает прозрачность, третий - возможность установить текстуру в виде заднего фона.

Рамка - рамка тела бота. Первый параметр задает цвет, второй - ширину рамки.

Время - время и дата под сообщением. Первый параметр задает цвет шрифта, второй задает размер шрифта.

Тень - тень для каждого сообщения. Первый параметр задает смещение тени вниз и правее, второй параметр задает степень размытия, третий - цвет.

Радиус - степень округленности углов сообщения. Параметр задает степень округленности.

Внутренние отступы - отступы от текста до стенок внутри сообщения. Параметр задает размер отступов.

Агент

Здесь вы можете отредактировать сообщения агента в чате.

Заполнение - фон сообщения агента. Параметр задает цвет.

Рамка - рамка сообщения агента. Первый параметр задает цвет, второй - ширину рамки.

Текст - текст сообщения агента. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

Имя - имя агента рядом с сообщением. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

Иконка - размер иконки агента.

Человек

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

Заполнение - фон сообщения пользователя. Параметр задает цвет.

Рамка - рамка сообщения пользователя. Первый параметр задает цвет, второй - ширину рамки.

Текст - текст сообщения пользователя. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

Иконка - размер иконки пользователя.

Кнопки

Здесь вы можете отредактировать кнопки в чате.

Текст - текст в кнопке. Первый параметр задает цвет шрифта, второй задает размер шрифта, третий - высоту строки шрифта.

Рамка - рамка вокруг кнопки. Первый параметр задает цвет, второй - ширину рамки.

Радиус - степень округленности углов кнопок.

Заполнение - фон кнопок. Первый параметр задает фон в обычном состоянии, второй параметр задает фон при наведении, третий - фон при нажатии на кнопку.

Высота - высота кнопки.

Внешние отступы - отступы кнопки от остального контента.

Низ

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

Заполнение - фон нижней части бота. Первый параметр задает фон, второй параметр задает прозрачность.

Рамка - рамка вокруг нижней части бота. Первый параметр задает цвет, второй - ширину рамки.

Высота - высота нижней части бота.

Радиус - степень округленности углов нижней части бота.

Тень - тень нижней части бота. Первый параметр задает смещение тени вверх, второй параметр задает степень размытия, третий - цвет.

Поле ввода

Здесь вы можете отредактировать поле ввода.

Радиус - степень округленности углов поля ввода.

Высота - высота поля ввода.

Внешние отступы - отступы поля ввода от остального контента. Первый параметр задает вертикальный отступ, второй - горизонтальный.

Заполнение - фон поля ввода.

Рамка - рамка поля ввода. Первый параметр задает цвет, второй - ширину рамки.

Текст - оформление вводимого текста. Первый параметр задает цвет текста, второй - размерю

Отправить - оформлении кнопки отправки данных. Первый параметр задает обычный цвет кнопки, второй параметр - цвет кнопок при наведении на нее.

Кнопка открытия окна чата

Здесь вы можете отредактировать кнопку запуска бота.

Радиус - радиус кнопки запуска бота. Первый параметр задает радиус всей кнопки запуска, второй - радиус иконки бот в кнопке.

Рамка - рамка кнопки запуска. Первый параметр задает цвет, второй - ширину рамки.

Страница(для теста)

Заполнение - фон на странице. Первый параметр задает задний фон под окном бота(пока только в консоли), второй параметр - картинку под окном бота(пока только в консоли).