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 January 13, 2023

Enable users to interact with Pega Intelligent Virtual Assistant™ (IVA) from a chat window that you embed in a web page. 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. 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.

Note: After you update Pega Platform or Pega Customer Service, to use the latest Digital Messaging Manager features, save your existing Digital Messaging channel.
  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, in the Chat heading field, enter a heading that the system displays in the chat window.
  8. Click the color box, and then select a color theme to display in the chat window.
  9. In the Display message field, enter an initial message to display to the user in the chat window.
  10. Click Save.For example:

    The following figure shows sample configuration settings for Web Messaging:

    The configuration settings for Web Messaging
    The configuration settings on the Digital Messaging Manager page for Web Messaging.
    Result: The system displays information that the new Web Messaging account was successfully registered.
  11. 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.
  12. 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.
  13. Optional: To display bot and CSR avatars in the chat window:
    1. Select the Display avatars in the chat widget check box.
    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.
  14. 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.
  15. 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 configure additional custom fonts for the chat window, repeat steps 15.a through 15.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.
  16. 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 16.c through 16.d.
  17. 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.For example: To capture a IP address, browser, and device type of a user, select IP address and Browser/device.
    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 17.d.
  18. 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 18.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 18.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.
  19. 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 19 to a page on your website, for example, above the </body> tag.

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.

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

Close Deprecation Notice
Contact us