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:

     

     

  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.

     

     

     Result:

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

     

     

  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:

     

     

  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: