Introduction

In this article, we will learn how to set up a chat widget design. It will help you personalize your chat widget the way you want.

To start setting up your chat widget design, go to the Connections section and choose the needed chatbot.

nullFigure 1. Choosing the Needed Chatbot in the Connections Section

Сlick on the needed chatbot and go to the Design tab. There is a chat preview window and three buttons: Change Theme, Customize Theme, and Preview. 

nullFigure 2. Design Tab

Let’s have a look at each.

Preview

By clicking on this button, you can see what your chat widget will look like on the page. 

nullFigure 3. The “Preview” Button


nullFigure 4. How the Chat Widget Looks on the Page

Change Theme

By clicking on this button, you will see the five themes for your chat widget.  

nullFigure 5. The “Change Theme” Button

nullFigure 6. Theme Options

Click on the one you like, then click Choose.

nullFigure 7. Choosing a Theme

When you go back to the Design tab, you will see the theme has changed. 

nullFigure 8. The Theme Changed

Let’s take up the next part of the article using the default theme.

Customize Theme

You can customize the selected theme personally for yourself. After clicking the Customize Theme button, you will see a page with settings to configure divided into 12 groups. They are: General, Popup Widget, Embedded Widget, Agent/Bot Messages, Visitor Messages, Buttons, All Messages, User Input, Static Menu, Calendar, Media Gallery, Custom CSS.

nullFigure 9. The “Customize Theme” Button
nullFigure 10. The Customize Theme Settings 

Let’s have a closer look at each.

General
In this section, the five general settings of your chat widget appearance are contained. They are: Header & Icon Color, Background Color, Background Image, Window Type, Show Emoji. 

Header & Icon Color
By clicking on the colored field, you can choose the hue, saturation, and luminosity of the chat widget header and chat icon. Click and drag your cursor or enter the RGB values manually. 

null

Figure 11. The Header & Icon Color Setting

Background Color 
By clicking on the white field, you can choose the hue, saturation, and luminosity of the chat widget background. Click and drag your cursor or enter the RGB values manually.

null

Figure 12. The Background Color Setting

Background Image 
If you want your chat widget to have a background image, enable the toggle and download a file or enter the picture URL by clicking the Choose button. After that choose the background image size from the dropdown list.

null

Figure 13. The Background Image Setting

Window Type 
Here you can choose the type of the corners for your chat widget from the dropdown list. 

null

Figure 14. The Window Type Setting

Show Emoji 
The Show Emoji option is switched on by default, however you can turn it off if you wish by disabling the toggle.

null

Figure 15. The Show Emoji Setting

Popup Widget
The settings of this section deal with location of the chat widget on the page, and showing the agent avatar and toast notifications. There are four settings in this section: Horizontal Alignment, Vertical Alignment, Avatar On a Widget Button, and Show Toast.

Horizontal Alignment
Here you can choose the location of the chat widget on the page. There are three options of horizontal alignment which you can select from the dropdown list: left, center, and right. 

null

Figure 16. The Horizontal Alignment Setting

Vertical Alignment
Here you also can choose the location of your chat widget. There are two options in the dropdown list: top (to align your chat widget to the top of the screen) and bottom (aligns the chat widget to the bottom of the screen).

null

Figure 17. The Vertical Alignment Setting

Avatar On a Widget Button
By enabling this toggle, you will set the agent avatar to be displayed on the chat widget button on your website or other channel, which will make it look personalized and invite the visitor to start a conversation.

null

Figure 18. The Avatar On a Widget Button Setting

nullFigure 19. How the Avatar Looks on the Page 

Show Toast
You can enable the Show Toast toggle to let toast notifications appear in the bottom left corner of the screen providing the visitor with timely information. Toast notifications may contain alerts, errors, confirmation of actions, and other system messages.

null

Figure 20. The Show Toast Setting

Toast notifications look like this:

null

Figure 21. What a Show Toast Looks Like

Embedded Widget
This setting is for chatbots embedded in the webpage. It defines the max width of the chat window. You can change the width by dragging your cursor.

null

Figure 22. The Embedded Widget Setting

This is what a chatbot embedded in the webpage looks like:

nullFigure 23. How the Embedded Widget looks on the Page

Agent/Bot Messages
These settings consider messages sent by the agent or bot. There are five settings: Message Font Face, Message Font Size, Message Text Color, Bubble Background Color, Bubble Corner Radius

Message Font Face
Here you can choose the message font face from the dropdown list.

null

Figure 24. The Message Font Face Setting 

Message Font Size
This option allows you to set the message font size.

null

Figure 25. The Message Font Size Setting

Message Text Color
By clicking on the black field, you can choose the hue, saturation, and luminosity of the message text. Click and drag your cursor or enter the RGB values manually.

null

Figure 26. The Message Text Color Setting

Bubble Background Color
By clicking on the grey field, you can choose the bubble background hue, saturation, and luminosity. Click and drag your cursor or enter the RGB values manually.

null

Figure 27. The Bubble Background Color Setting

Bubble Corner Radius 
By increasing corner radius, you can make bubble corners rounded, which facilitates visual perception.

null

Figure 28. The Bubble Corner Radius Setting

Visitor Messages
In this section the settings of visitors’ messages are collected. There are five settings: Message Font Face, Message Font Size, Message Text Color, Bubble Background Color, Bubble Corner Radius.

Message Font Face
Here you can choose the message font face from the dropdown list.

null

Figure 29. The Message Font Face Setting

Message Font Size
This option allows you to set the message font size.

null

Figure 30. The Message Font Size Setting

Message Text Color
By clicking on the white field, you can choose the hue, saturation, and luminosity of the message text. Click and drag your cursor or enter the RGB values manually.

null

Figure 31. The Message Text Color Setting

Bubble Background Color
By clicking on the colored field, you can choose the bubble background hue, saturation, and luminosity. Click and drag your cursor or enter the RGB values manually.

null

Figure 32. The Bubble Background Color Setting

Bubble Corner Radius 
By increasing corner radius, you can make bubble corners rounded, which facilitates visual perception.

null

Figure 33. The Bubble Corner Radius Setting

Buttons
This section combines the settings of the quick reply buttons. There are four settings: Button Text Color, Button Background Color, Button Border Color, and Button Corner Radius. 

Button Text Color
By clicking on the colored field, you can choose the button text hue, saturation, and luminosity. Click and drag your cursor or enter the RGB values manually.

null

Figure 34. The Button Text Color Setting

Button Background Color
By clicking on the white field, you can choose the button background hue, saturation, and luminosity. Click and drag your cursor or enter the RGB values manually.

null

Figure 35. The Button Background Color Setting

Button Border Color
By clicking on the colored field, you can choose the button border hue, saturation, and luminosity. Click and drag your cursor or enter the RGB values manually.

null

Figure 36. The Button Border Color Setting

Button Corner Radius
By increasing corner radius, you can make button corners rounded, which facilitates visual perception.

null

Figure 37. The Button Corner Radius Setting

All Messages
This section considers settings for all chat widget messages. There are five settings contained in this section: Pinned Messages Bubble Background, Show Avatar, Show Time Stamp, Show System Message, Checkbox Label Text Color. 

Pinned Messages Bubble Background
By clicking on the white field, you can choose the hue, saturation, and luminosity of the pinned messages bubble background. Click and drag your cursor or enter the RGB values manually.

Show Avatar 
By enabling the toggle, you can show the message avatar. You also can disable the toggle to save space on the screen.

null

Figure 38. The Show Avatar Setting

Show Time Stamp
Message Timestamp is used to mark the time when the messages were sent and received. You can show it by enabling the toggle.

null

Figure 39. The Show Time Stamp Setting

Show System Message 
You can enable the toggle to let system messages appear in the chat widget.

null

Figure 40. The Show System Message Setting

Checkbox Label Text Color 
By clicking on the black field, you can choose the hue, saturation, and luminosity of the text displayed on the right of the Quick Reply checkbox (the case when the multi-select check boxes are chosen). Click and drag your cursor or enter the RGB values manually.

nullFigure 41. The Checkbox Label Text Color Setting

User Input
This section includes settings of user input. There are three ones: Font Face, Font Size, Text Color.

Font Face
Here you can choose the font face from the dropdown list.

null

Figure 42. The Font Face Setting

Font Size
This option allows you to set the font size.

null

Figure 43. The Font Size Setting

Text Color
By clicking on the black field, you can choose the hue, saturation, and luminosity of the text. Click and drag your cursor or enter the RGB values manually.

null

Figure 44. The Text Color Setting

Static Menu
In this section you can find settings related to the static menu which gives your visitors an easy way to click to the most important actions in your chatbot. There are two options: Icon Color and Static Menu Position.

Icon Color
By clicking on the grey field, you can choose the hue, saturation, and luminosity of the static menu icon. Click and drag your cursor or enter the RGB values manually.

null

Figure 45. The Icon Color Setting

Static Menu Position
Here you can choose the location of the static menu icon from the dropdown list. There are three options: floating, top, and bottom. 

null

Figure 46. The Static Menu Position Setting

Calendar
Here you can find settings of the calendar displayed in your chat widget. There are 26 settings: Content Font Face, Content Font Size, Content Text Color, Content Fill Color, Header & Footer Font Face,  Header & Footer Font Size,  Header & Footer Text Color, Header & Footer Fill Color, Header & Footer Accent Color, Available Day Font Face, Available Day Font Size, Available Day Text Color, Available Day Border Color, Unavailable Day Font Face, Unavailable Day Font Size, Unavailable Day Text Color, Time Slot Button Font Face, Time Slot Button Font Size, Time Slot Button Text Color, Time Slot Button Background Color, Time Slot Button Border Color, Confirm Button Font Face, Confirm Button Font Size, Confirm Button Text Color, Confirm Button Background Color, Confirm Button Border Color.

Content Font Face
Here you can choose the font face for the calendar content from the dropdown list.

null

Figure 47. The Content Font Face Setting

Content Font Size
This option allows you to set the font size for the calendar content.

null

Figure 48. The Content Font Size Setting

Content Text Color
By clicking on the black field, you can choose the text hue, saturation, and luminosity for the calendar content. Click and drag your cursor or enter the RGB values manually.

Content Fill Color 
By clicking on the white field, you can choose the background hue, saturation, and luminosity for the calendar content. Click and drag your cursor or enter the RGB values manually.

Header & Footer Font Face
Here you can choose the font face for the upper and lower part of your calendar.

null

Figure 49. The Header & Footer Font Face Setting
null

Figure 50. The Header & Footer Font Face Setting

Header & Footer Font Size
This option allows you to set the font size for the upper and lower part of your calendar.

null

Figure 51. The Header & Footer Font Size Setting

Header & Footer Text Color
By clicking on the black field, you can choose the text hue, saturation, and luminosity for the upper and lower part of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 52. The Header & Footer Text Color Setting

Header & Footer Fill Color 
By clicking on the white field, you can choose the background hue, saturation, and luminosity for the upper and lower part of your calendar. Click and drag your cursor or enter the RGB values manually.

Available Day Font Face
Here you can choose the font face for the available days in your calendar.

null

Figure 53. The Available Day Font Face Setting

Available Day Font Size
This option allows you to set the font size for the available days in your calendar.

null

Figure 54. The Available Day Font Size Setting

Available Day Text Color
By clicking on the black field, you can choose the text hue, saturation, and luminosity for the available days in your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 55. The Available Day Text Color Setting

Available Day Border Color
By clicking on the white field, you can choose the border hue, saturation, and luminosity for the available days in your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 56. The Available Day Border Color Setting

Unavailable Day Font Face
Here you can choose the font face for the unavailable days in your calendar.

null

Figure 57. The Unavailable Day Font Face Setting

Unavailable Day Font Size
This option allows you to set the font size for the unavailable days in your calendar.

null

Figure 58. Unavailable Day Font Size Setting

Unavailable Day Text Color
By clicking on the grey field, you can choose the text hue, saturation, and luminosity for the unavailable days in your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 59. The Unavailable Day Text Color Setting

Time Slot Button Font Face
Here you can choose the font face for the text of the time slot button of your calendar.

null

Figure 60. The Time Slot Button Font Face Setting

Time Slot Button Font Size
This option allows you to set the font size for the text of the time slot button of your calendar.

null

Figure 61. The Time Slot Button Font Size Setting

Time Slot Button Text Color
By clicking on the colored field, you can choose the text hue, saturation, and luminosity for the time slot button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 62. The Time Slot Button Text Color Setting

Time Slot Button Background Color
By clicking on the white field, you can choose the background hue, saturation, and luminosity for the time slot button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 63. The Time Slot Button Background Color Setting

Time Slot Button Border Color
By clicking on the colored field, you can choose the border hue, saturation, and luminosity for the time slot button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 64. The Time Slot Button Border Color Setting

Confirm Button Font Face
Here you can choose the font face for the text of the confirmation button of your calendar.

null

Figure 65. The Confirm Button Font Face Setting

Confirm Button Font Size
This option allows you to set the font size for the text of the confirmation button of your calendar.

null

Figure 66. The Confirm Button Font Size Setting

Confirm Button Text Color
By clicking on the white field, you can choose the text hue, saturation, and luminosity for the confirmation button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 67. The Confirm Button Text Color Setting

Confirm Button Background Color
By clicking on the colored field, you can choose the background hue, saturation, and luminosity for the confirmation button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 68. The Confirm Button Background Color Setting

Confirm Button Border Color
By clicking on the colored field, you can choose the border hue, saturation, and luminosity for the confirmation button of your calendar. Click and drag your cursor or enter the RGB values manually.

null

Figure 69. The Confirm Button Border Color Setting

Media Gallery
Here are settings for the media gallery of your chat widget. This section includes ten settings. They are: Header Font Face, Header Font Size, Header Text Color, Header Background Color, Footer Background Color, Button Font Face, Button Font Size, Button Text Color, Button Background Color, Button Border Color.

Header Font Face
Here you can choose the font face for the header text of your media gallery.

null

Figure 70. The Header Font Face Setting

Header Font Size
This option allows you to set the font size for the header text of your media gallery.

null

Figure 71. The Header Font Size Setting

Header Text Color
By clicking on the black field, you can choose the hue, saturation, and luminosity for the header of your media gallery. Click and drag your cursor or enter the RGB values manually.

null

Figure 72. The Header Text Color Setting

Header Background Color
By clicking on the white field, you can choose the background hue, saturation, and luminosity for the upper part of your media gallery. Click and drag your cursor or enter the RGB values manually.

null

Figure 73. The Header Background Color Setting

Footer Background Color
By clicking on the white field, you can choose the background hue, saturation, and luminosity for the lower part of your media gallery. Click and drag your cursor or enter the RGB values manually.

null

Figure 74. The Footer Background Color Setting

Button Font Face
Here you can choose the font face for the text of your media gallery play button.

null

Figure 75. The Button Font Face Setting

Button Font Size
This option allows you to set the font size for the text of your media gallery play button.

null

Figure 76. The Button Font Size Setting

Button Text Color          
By clicking on the colored field, you can choose the text hue, saturation, and luminosity for your media gallery play button. Click and drag your cursor or enter the RGB values manually.

null

Figure 77. The Button Text Color Setting

Button Background Color
By clicking on the white field, you can choose the background hue, saturation, and luminosity for your media gallery play button. Click and drag your cursor or enter the RGB values manually.

null

Figure 78. The Button Background Color Setting

Button Border Color 
By clicking on the colored field, you can choose the border hue, saturation, and luminosity for your media gallery play button. Click and drag your cursor or enter the RGB values manually.

null

Figure 79. The Button Border Color Setting

Custom CSS
Use this setting in case you can’t customize your chat widget with the reviewed 11 settings.

null

Figure 80. The Custom CSS Setting

Once you configure all the needed settings, click the “Save” button in the upper-right corner of the page.

nullFigure 81. The “Save” Button

Conclusion

Now you know how to set up the design of your chat widget. You can match your website and the chat widget design or customize your chat appearance as you wish.