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.
Agent
Here you can edit the agent's chat messages.
Fill - agent message background. The parameter sets the color.
Border - agent message border. The first parameter sets the color, the second - the width of the border.
Text - agent message text. 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.
Name - the agent's name next to the message. 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.
Icon - agent icon size.
Human
Here you can edit the user's chat messages.
Fill - the background of the user's message. The parameter sets the color.
Border - user message border. The first parameter sets the color, the second - the width of the border.
Text - the text of the user's message. 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.
Icon - user icon size.
Buttons
Here you can edit the buttons in the chat.
Text - button text. 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.
Border - border around the button. The first parameter sets the color, the second - the width of the border.
Radius - the level of roundness of the corners of the buttons.
Fill - buttons background. The first parameter sets the background in the normal state, the second parameter sets the hover background, the third - the background when the button is clicked.
Height - button height.
Margin - indenting the button from the rest of the content.
Низ
Здесь вы можете отредактировать нижний колонтитул бота.
Заполнение - фон нижней части бота. Первый параметр задает фон, второй параметр задает прозрачность.
Рамка - рамка вокруг нижней части бота. Первый параметр задает цвет, второй - ширину рамки.
Высота - высота нижней части бота.
Радиус - степень округленности углов нижней части бота.
Тень - тень нижней части бота. Первый параметр задает смещение тени вверх, второй параметр задает степень размытия, третий - цвет.
Поле ввода
Здесь вы можете отредактировать поле ввода.
Радиус - степень округленности углов поля ввода.
Высота - высота поля ввода.
Внешние отступы - отступы поля ввода от остального контента. Первый параметр задает вертикальный отступ, второй - горизонтальный.
Заполнение - фон поля ввода.
Рамка - рамка поля ввода. Первый параметр задает цвет, второй - ширину рамки.
Текст - оформление вводимого текста. Первый параметр задает цвет текста, второй - размерю
Отправить - оформлении кнопки отправки данных. Первый параметр задает обычный цвет кнопки, второй параметр - цвет кнопок при наведении на нее.
Кнопка открытия окна чата
Здесь вы можете отредактировать кнопку запуска бота.
Радиус - радиус кнопки запуска бота. Первый параметр задает радиус всей кнопки запуска, второй - радиус иконки бот в кнопке.
Рамка - рамка кнопки запуска. Первый параметр задает цвет, второй - ширину рамки.
Страница(для теста)
Заполнение - фон на странице. Первый параметр задает задний фон под окном бота(пока только в консоли), второй параметр - картинку под окном бота(пока только в консоли).
