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.

Footer

Here you can edit the footer of the bot.

Fill - background of the bottom of the bot. The first parameter specifies the background, the second parameter specifies the transparency.

Border - a border around the bottom of the bot. The first parameter sets the color, the second - the width of the border.

Height - height of the bottom of the bot.

Radius - the level of roundness of the corners of the bottom of the bot.

Shadow - the shadow of the bottom of the bot. The first parameter sets the shadow offset upwards, the second parameter sets the level of blur, the third - the color.

Input

Here you can edit the input field.

Radius - the level of roundness of the corners of the input field.

Height - input field height.

Margins - padding the input field from the rest of the content. The first parameter sets the vertical indent, the second - the horizontal one.

Fill - input field background.

Border - input field border. The first parameter sets the color, the second - the width of the border.

Font - formatting of the input text. The first parameter sets the color of the text, the second - the size.

Send - the design of the submit button. The first parameter sets the normal color of the button, the second parameter sets the color of the buttons when hovering over it.

Сhat-window оpen button

Here you can edit the bot start button.

Radius - bot start button radius. The first parameter sets the radius of the entire launch button, the second - the radius of the bot icon in the button.

Border - start button border. The first parameter sets the color, the second - the width of the border.

Page (for testing)

Fill - background on the page. The first parameter sets the background under the bot window (only in the console so far), the second parameter - the picture under the bot window (only in the console so far).