Skip to main content

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

Setting up the IVA for Web Messaging

Updated on February 10, 2023

Enable users to interact with Pega Intelligent Virtual Assistant™ (IVA) from a chat window that you embed in a webpage. As a result, you give users another method to interact with your application and help to address reported issues more efficiently.

For example, when customers use an embedded chat window of a website to report a missing part for their purchased mobile phone, your chatbot can respond by asking for more details about the issue and automatically starting a service request case in the application. If you define multiple messaging accounts for your Digital Messaging channel, you can also give users an option to switch from the chat window to another messaging platform, such as Facebook Messenger or WhatsApp, for your application.
Before you begin: You access Digital Messaging Manager in the Digital Messaging channel to configure individual messaging accounts from one place for your application.

If your security team requires JSON Web Token (JWT) authentication for communication between your IVA for Digital Messaging and social messaging platforms, you can configure this alternative security method for your channel. JWT authentication is an industry-standard method that permits the sender to sign a request with a unique token that the receiver later verifies, to ensure that the obtained request is valid and that the token did not expire. For Pega Customer Service 8.6 and higher, JWT is the default authentication method. The system automatically selects the JWT authentication method in the Digital Messaging security configuration in your instance, and in Digital Messaging Service.

  • You configure the languages in which the Web Messaging widget can interact with users by defining the list of supported languages in the Digital Messaging channel. For more information, see Creating a Digital Messaging channel.
  • After you update Pega Platform or Pega Customer Service, to use the latest Digital Messaging Manager features, save your existing Digital Messaging channel.
Note: To learn about accessing website data, for example, tags and cookies for your chatbot, see Accessing website data when using Pega Intelligent Virtual Assistant (IVA) for Web Messaging.

For relevant training materials and to test this feature on a virtual Pega instance, see the Configuring Digital Messaging Manager module and the Creating a Digital Messaging interface challenge on Pega Academy.

  1. In the navigation pane of App Studio, click Channels.
  2. In the Current channel interfaces section, click the icon that represents your existing Digital Messaging channel.
  3. In the Digital Messaging channel, click the Connection tab.
  4. Click Manage connections.
  5. In the Digital Messaging Manager window, click Add Connection, and then click the Web Messaging icon.
  6. On the General tab, in the Name field, enter a name for the Web Messaging account.
  7. In the Appearance section, click the color box, and then select a color theme to display in the chat window.
  8. In the Chat headings section, in the Language list, select a language for the chat heading.
  9. In the Chat heading field, enter a heading that the system displays in the chat window.
  10. Optional: To define a heading in an additional language, click Add chat heading for another language, and then repeat steps 8 through 9.
    You can define a heading in additional languages based on the list of supported languages for the Digital Messaging channel.
  11. Click Save.Result: The system displays information that the new Web Messaging account was successfully registered.
  12. Configure sound notifications when messages arrive in the chat window:
    1. In the Sound notifications section, in the Choose when to play list, select Don't Play Sound Notifications, Play On Every Message, or Play Only When Not Visible.
    2. If you selected to play a sound for every message or only when the chat window is not visible, in the Select sound list, select one of the predefined sounds.
    3. Optional: To hear the audio of the selected predefined sound, click the Play icon.
    When you enable sound notifications for the chat window, website users can also control their sounds directly from the widget menu by clicking an option to Mute or Unmute.
  13. 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.
  14. Optional: To display the Emoji icon in the chat window, in the Widget configuration section, select the Enable emojis picker checkbox.
    By clicking the Emoji icon during an interaction with the chatbot, users can insert a predefined emoji in the chat message.
  15. Optional: To display a Powered by Pega footer in the chat window, select the Display Powered by Pega checkbox.
  16. Optional: To display a typing indicator in the chat window to users before the system sends the chatbot response, select the Display typing indicator checkbox.
  17. Optional: To hide the chat widget launcher from your webpage, select the Remove default Widget Launcher checkbox.
    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.
  18. Optional: To let users switch to another supported language in the chat window, select the Display select language option checkbox.
    When you enable this option, users can switch between each of the supported languages for the Digital Messaging channel. For more information, see Creating a Digital Messaging channel.
  19. Optional: To display bot and CSR avatars in the chat window:
    1. Select the Display avatars in the chat widget checkbox.
    2. In the Bot avatar type section, click Default or Custom.
    3. In the CSR avatar type section, click Default or Custom.
    4. 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.
    5. 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.
  20. 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 sample configuration settings for Web Messaging:

    The configuration settings for Web Messaging
    The settings on the Digital Messaging Manager page for Web Messaging.
  21. 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 21.a through 21.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 in the list for the chat window.
  22. Optional: To configure a list of additional channels that users can switch to from the chat window:
    1. Click the Channel switching tab.
    2. In the Channel switching control placement section, click Top right menu or Visible in header to configure where the system displays the option to switch channels.
    3. Click Add channel, and then in the Add channel window, in the Channel list, select a channel.For example: Select Facebook.
    4. In the Connections section, click the name of your configured channel account, and then click Submit.
    5. Add more channels by repeating steps 22.c through 22.d.
  23. Optional: To configure the chat context data to display to CSRs when they interact with users:
    1. Click the Context data tab.
    2. In the General information section, select the context data to capture during interaction with a user:
      Context dataDescription
      IP addressThe IP address of the browser session.
      LocationThe physical location based on their browser settings.
      Browser/deviceThe web browser and device type.
      Current pageThe webpage from which the user launched the chat window.
    3. Click Save.
    4. In the Tags section, in the Display Name field and the Tag field, define the tags to add to your website, and then click Add.
      Use tags to capture custom context data during an interaction with a user so that the system passes this information to a CSR. Custom tags require additional implementation on your website.
    5. Optional: To add more tags, repeat step 23.d.
  24. Optional: To configure security options for the Web Messaging widget:
    1. Click the Security tab.
    2. In the Allowed domains section, in the New domain field, enter a domain in which the system can display the Web Messaging widget, and then click Add.
      Note: If you do not specify any domains, the widget is rendered on any website.
    3. Optional: To add more domains to the list, repeat step 24.b.
    4. In the Allowed cookies section, in the New cookie field, enter a cookie name that the system allows to pass information between your website and your application.
    5. Optional: To add more cookies to the list, repeat step 24.d.
    6. Optional: To sign requests while exchanging private data, in the JWT Secret section, click Show JWT Secret, and then copy the displayed identification code to the clipboard or a file.
      You can then use the identification code to authorize requests when you exchange private data.
  25. Optional: To configure proactive chat capability, set up chat triggers for the Web Messaging widget and embed them on your website as JavaScript code snippets.
    With proactive chat your chatbot can engage with users in the Web Messaging chat window by automatically inviting them to a chat conversation based on configured rules and conditions. For more information, see Configuring proactive chat for Web Messaging.
  26. Click the Installation tab, and then copy to clipboard or a text file the displayed script code for your Web Messaging widget.
What to do next: To display the Web Messaging widget to users, add the script tag you that saved in step 26 to a page on your website, for example, above the </body> tag.
  • Previous topic Setting up the IVA for Twitter
  • Next topic Embedding the Web Messaging widget in a native Pega Platform application

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us