Modify the appearance of your Web Messaging widget to align with your organization's preferences and specifications. As a result, you enhance the brand visibility to customers in the Digital Messaging channel, increasing the recognition of your company and its services.
- In the Digital Messaging Manager window, edit your Web Messaging connection, and then click the Styling tab.
- In the Widget section, in the Primary color palette, pick a color for the Web Messaging widget header.
- In the Header text color palette, pick a color for the Web Messaging widget header text.
- Optional: To display a company logo in the chat window, in the Company logo section, select Display company logo, click Upload, and then select an image to upload.
- In the Widget styling configuration section, configure the
settings for the Web Messaging widget:
- Select the Display Powered by Pega checkbox to display a Powered by Pega footer in the chat window.
- Select the Remove default Widget Launcher
checkbox to hide the chat widget launcher from your webpage. For example, you can hide the chat widget if you want to replace the default chat bubble with a custom button. You will need to configure a method in your website for the user to start a chat.
- Select the Display avatars in the chat widget checkbox to display bot and CSR avatars in the chat window.
- If you selected to display avatars in the widget in the previous step:
The system supports the following image file types for bot and CSR avatars:
- In the Bot avatar type section, click Default or Custom.
- In the CSR avatar type section, click Default or Custom.
- If you selected a custom bot avatar type, click Upload bot avatar image, select an image file from your local drive, and then click Open.
- If you selected a custom CSR avatar type, click Upload CSR avatar image, select an image file from your local drive, and then click Open.
JPEG. The uploaded avatar image must have same width and height, and cannot exceed 500 KB.
- Optional: To use your own font in the chat window:
The system supports the following font file types:
- In the Custom fonts for widget section, click Upload font file.
- Select a font file from your local drive, and then click Open.
- To upload additional fonts for the chat window, repeat steps 7.a through 7.b.
WOFF2. If you upload multiple font files, the browser displays the first supported font from the list for the chat window.
- Optional: Configure the widget position and button type on the webpage:
The system updates the widget button type and text orientation on the webpage immediately after you save changes.
- In the Widget position list, select the position on the webpage where you want to display the widget.
- In the Widget button type list, select the button type for the widget.
- If you select a text button type, in the Text orientation list, select the text orientation.
- If you select a text button type, in the Button text field, enter a label for the button, and then click Save.
- Click Save.