Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adjusting the Web Messaging widget appearance

Updated on September 27, 2023

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.

For example, you can showcase a personalized company logo, incorporate custom fonts, and include chat conversation avatars within the Web Messaging widget.
  1. In the Digital Messaging Manager window, edit your Web Messaging connection, and then click the Styling tab.
  2. In the Widget section, in the Primary color palette, pick a color for the Web Messaging widget header.
  3. In the Header text color palette, pick a color for the Web Messaging widget header text.
  4. 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.
  5. In the Widget styling configuration section, configure the settings for the Web Messaging widget:
    1. Select the Display Powered by Pega checkbox to display a Powered by Pega footer in the chat window.
    2. 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.
    3. Select the Display avatars in the chat widget checkbox to display bot and CSR avatars in the chat window.
  6. If you selected to display avatars in the widget in the previous step:
    1. In the Bot avatar type section, click Default or Custom.
    2. In the CSR avatar type section, click Default or Custom.
    3. 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.
    4. 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.
    The system supports the following image file types for bot and CSR avatars: PNG, JPG, and JPEG. The uploaded avatar image must have same width and height, and cannot exceed 500 KB.
  7. Optional: To use your own font in the chat window:
    1. In the Custom fonts for widget section, click Upload font file.
    2. Select a font file from your local drive, and then click Open.
    3. To upload additional fonts for the chat window, repeat steps 7.a through 7.b.
    The system supports the following font file types: TTF, OTF, WOFF, and WOFF2. If you upload multiple font files, the browser displays the first supported font from the list for the chat window.
  8. Optional: Configure the widget position and button type on the webpage:
    1. In the Widget position list, select the position on the webpage where you want to display the widget.
    2. In the Widget button type list, select the button type for the widget.
    3. If you select a text button type, in the Text orientation list, select the text orientation.
    4. If you select a text button type, in the Button text field, enter a label for the button, and then click Save.
    The system updates the widget button type and text orientation on the webpage immediately after you save changes.
    For example:

    The following figure shows styling configuration settings on the Styling tab for Web Messaging:

    The styling configuration settings for Web Messaging
    The styling settings on the Digital Messaging Manager page for Web Messaging related to company logo, widget styling configuration, and custom fonts.
  9. Click Save.
What to do next: Configure the general, security and other options for your Web Messaging channel connection. For more information, see Setting up the IVA for Web Messaging.
  • Previous topic Setting up the IVA for Web Messaging
  • Next topic Real-time translation with Digital Messaging and the Web Messaging widget

Related articles

Setting up the IVA for Web MessagingDigital Messaging Service overviewCreating a Digital Messaging channel

Tags

Pega Platform 8.7 Conversational Channels

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us