Customizing the Web Messaging widget
Customize the appearance of your Web Messaging widget through the Styling tab in your Digital Messaging Manager connection. Configure widget settings, such as displaying the company logo and avatars, using custom fonts, and selecting the widget position and button type on your webpage. Additionally, you can select the state of the text input area for the quick reply type menu.
Modifying the Widget section
You can select the main color for the header, icons, menu, messages, buttons, and highlights of your Web Messaging widget in the Primary color palette. You can select a color from the Header text color palette for the header text, as shown in the following figure:
The following figure shows an example of the modified widget color:
Modifying the Company logo section
If you want to display the company logo on the Web Messaging chat header, select the Display company logo checkbox, and then upload an image for the connection, as shown in the following figure:
The following figure shows an example output of modifying the company logo:
Modifying the Widget styling configuration section
To display a Powered by Pega footer in the chat window, select the Display Powered by Pega option.
You can specify whether to display the default Widget Launcher in your web page, as shown in the following figure. Select the Remove default Widget Launcher checkbox to hide the default button and display your own chat launcher instead that you configure in your custom web page script.
To display bot and CSR avatars in the chat window, select the Display avatars in chat widget option.
Note: You can select Custom to upload the bot, customer, and CSR avatar images that you want to use.
To customize messages font color and background color for all the three types of avatars, select the Update message and font color option.
The following figure shows an example of the widget styling modifications:
Modifying the Custom fonts for widget section
You can upload custom fonts files in the TTF, OTF, WOFF, or WOFF2 formats for the Web Messaging widget by clicking Upload font file.
You can select the position on the webpage where you want to display the widget, and then choose the button type for the widget from the available options, as shown in the following figure:
The three options are available for the State of text input area for quick reply type menu list:
- Keep text input area enabled: This option maintains the text input area enabled when the quick reply menu is displayed.
- Disable text input area with an option to enable with a click: With this choice, the text input area is disabled initially, but you can enable it with a click when the quick reply menu is shown.
- Disable text input area until a quick reply item is selected: Here, the text input area stays disabled until you select a quick reply item.
The following figure shows an example of the custom placement of the Web Messaging widget:
You have reached the end of this topic. You learned:
- How to customize the appearance of your Web Messaging widget in your Digital Messaging Manager connection.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?