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.
Figure 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.
Figure 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.
Figure 3. The “Preview” Button
Figure 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.
Figure 5. The “Change Theme” Button
Figure 6. Theme Options
Click on the one you like, then click Choose.
Figure 7. Choosing a Theme
When you go back to the Design tab, you will see the theme has changed.
Figure 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.
Figure 9. The “Customize Theme” Button
Figure 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.
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.
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.
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.
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.
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.
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).
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.
Figure 18. The Avatar On a Widget Button Setting
Figure 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.
Figure 20. The Show Toast Setting
Toast notifications look like this:
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.
Figure 22. The Embedded Widget Setting
This is what a chatbot embedded in the webpage looks like:
Figure 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.
Figure 24. The Message Font Face Setting
Message Font Size
This option allows you to set the message font size.
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.
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.
Figure 27. The Bubble Background Color Setting
Bubble Corner Radius
By increasing corner radius, you can make bubble corners rounded, which facilitates visual perception.
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.
Figure 29. The Message Font Face Setting
Message Font Size
This option allows you to set the message font size.
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.
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.
Figure 32. The Bubble Background Color Setting
Bubble Corner Radius
By increasing corner radius, you can make bubble corners rounded, which facilitates visual perception.
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.
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.
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.
Figure 36. The Button Border Color Setting
Button Corner Radius
By increasing corner radius, you can make button corners rounded, which facilitates visual perception.
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.
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.
Figure 39. The Show Time Stamp Setting
Show System Message
You can enable the toggle to let system messages appear in the chat widget.
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.
Figure 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.
Figure 42. The Font Face Setting
Font Size
This option allows you to set the font size.
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.
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.
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.
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.
Figure 47. The Content Font Face Setting
Content Font Size
This option allows you to set the font size for the calendar content.
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.
Figure 49. The Header & Footer Font Face Setting
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Figure 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.
Leave a comment