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 level 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 level 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.

Body

Here you can edit the chat area of the bot

Fill - bot body background. The first parameter sets the color, the second sets the transparency, the third - the ability to set the background texture.

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

Time - time and date under the message. The first parameter sets the font color, the second sets the font size.

Shadow - shadow for each message. The first parameter sets the shadow offset down and to the right, the second parameter sets the level of blur, the third - the color.

Radius - the level of roundness of the corners of the message. The parameter sets the level of roundness.

Padding - paddings from the text to the walls inside the message. The parameter sets the size of the paddings.

Агент

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

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

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

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

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

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

Человек

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

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

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

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

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

Кнопки

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

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

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

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

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

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

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

Низ

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

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

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

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

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

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

Поле ввода

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

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

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

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

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

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

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

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

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

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

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

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

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

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