Skip to main content


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

Embedding the Web Messaging widget in a native Pega Platform application

Updated on July 3, 2023

Provide another way for customers to interact with your Pega Platform application by embedding the Web Messaging widget in the application's existing harness or a new section. As a result, customers can more efficiently ask for help, find information, or report an issue, by using a Digital Messaging chat window in your application.

Before you begin: In Digital Messaging Manager, on the Installation tab for your Web Messaging channel connection, save a copy of the JavaScript function representing the Web Messaging widget. For more information, see Setting up the IVA for Web Messaging

When you embed the Web Messaging widget in your application, you use the same JavaScript function that is defined Installation tab of Digital Messaging Manager.

There are two ways to embed the Web messaging widget in your application.

    Include the Web messaging widget in a harness

  • Edit a harness and embed the widget:
    1. Switch to Dev Studio.
    2. Open the application that contains the harness where you want to add a Web messaging widget, and then edit the harness rule.
      For more information, see Harnesses.
    3. In the harness rule, click the Scripts & styles tab.
    4. in the Scripts section, click Add a row.
    5. In the new row, in the Name column, enter webWidgetInstallation, and then click Edit.
      Result:

      The following figure shows the pyCaseManager7 harness rule with a new JavaScript text file named webWidgetInstallation:

      Harness rule with defined JavaScript text files
      The pyCaseManager7 harness rule displaying two JavaScript text files in the Scripts & styles tab.
    6. Click Create and open.
    7. In the webWidgetInstallation text file rule, on the Main tab, in the text area, enter the JavaScript code from the example below to insert the Web Messaging widget.
      For example: Enter the following JavaScript code:
      (function(){
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "{Insert your installation function here}"
          script.async = true;
          var firstScript = document.getElementsByTagName("script")[0];
          firstScript.parentNode,insertBefore(script, firstScript);
      })();
    8. In the JavaScript code, replace the value for script.src with the JavaScript function value in the src attribute obtained from the Installation tab of your Web Messaging channel in Digital Messaging Manager.
      For example:

      The following figure shows the Installation tab of Digital Messaging Manager where you obtain the JavaScript function in the src attribute to replace in the script.src value for the JavaScript code from previous step.

      The JavaScript function for the Web Messaging widget
      The Installation tab in Digital Messaging Manager where you can copy the JavaScript function.
      Result:

      The following figure shows the webWidgetInstallation text file rule with the JavaScript code needed to embed the Web Messaging widget:

      Text file rule with JavaScript code
      The webWidgetInstallation text file rule containing JavaScript code.
    9. Click Save.
    10. In the harness rule, click Save as, and then create a copy of the harness rule in your application ruleset.
    11. Switch back to App Studio.
  • Include the Web messaging widget in a section

  • Create a section and embed the widget:
    1. Switch to Dev Studio.
    2. In the application where you want to add the Web Messaging widget, create a section rule.
      For more information, see Creating sections.
      For example: Create a new section rule named webWidgetInstall.
    3. In the section rule, click convert to full screen editor, and then in the Confirm section conversion dialog box, click Submit.
    4. Click the HTML tab.
    5. Clear the Auto-generated HTML checkbox.
    6. In the HTML source field, enter a script tag from the example below to link to the Web messaging widget, replacing the src attribute value with the JavaScript function obtained from the src attribute value from the Installation tab in Digital Messaging Manager.
      For example: Enter the following HTML code:
      <script id="pega-wm-chat"
              src="https://widget.use1dev.chat.pega.digital/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/widget.js">
      </script>
      Result:

      The following figure shows the webWidgetInstallation section rule with a script tag defined that calls the Web messaging widget from Digital Messaging Manager:

      Section rule with HTML source code
      The webWidgetInstallation section rule containing the script tag.
    7. Click Save.
    8. Switch back to App Studio.
    For example:

    The following video demonstrates how to embed the Web Messaging widget in a new section for a native Pega Platform application:

  • Previous topic Native virus scanning in Web Messaging with Digital Messaging
  • Next topic Setting up the IVA for WhatsApp

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