Configuring the Mashup channel

Configure the Mashup channel in your application to embed Pega Platform content in an external web application, for example, to create new work for a case type or to display a harness. Mashup code is generated as HTML that you can copy, paste, and view within a web page. You can also test how the mashup code that you generate looks in a mobile app, or preview a channel to verify that mashup code displays correctly on different types of devices.

Note: If the Enable samesite cookie attribute check box or the Enable CSRF token check check box on the Cross-Site Request Forgery landing page is selected, mashups do not work. To to enable mashups when the Enable CSRF token check is selected, add the domains where the mashup scripts are embedded to the Allowed referrers field on the Cross-Site Request Forgery landing page. For more information, see Enabling and configuring Cross-Site Request Forgery settings.

In the header of Dev Studio, click the name of the application, and then click Channels and interfaces.
In the Create new channel interface section, click Mashup.
In the Name field, enter a name for the Mashup channel interface.
Optional: To distinguish this channel interface from other Mashup channel interfaces, in the Description field, specify the purpose of this channel interface.
In the URL field, enter the URL for a Pega Platform instance. The URL format is https://host/prweb/app/applicationname_sessionidentifier.
For example: http://sample.pega.com:8080/prweb/app/sampleapp_1234
1. Optional: To generate the mashup snippet with URL encryption, turn on the Use encryption toggle.
In the Configuration section, define the action that the mashup code performs:
1. From the Action list, select a Pega Platform action, and then enter additional details for the selected action.
2. In the Thread name field, enter the name of the thread that handles the mashup.
3. Optional: To load the mashup gadget as the last item on the page, turn on the Defer mashup load toggle.
4. Optional: To use a skin for the selected action, in the Skin list, select a skin name.
5. From the Iframe resizing list, select the resize mode for the mashup gadget.
6. From the Initial skeleton list, select the skeleton to show while the content is loading.
7. Optional: To add an action parameter, in the Custom parameters section, click the Add a row icon, and then enter a parameter name and value.
Click Generate mashup code.
Optional: Test your cases for the Pega Platform application in a demo mashup mobile app:
1. Click Try Mobile Mashup.
2. Download and install the Pega Mashup Preview mobile app from the Apple App Store or Google Play.
3. Open the mobile app and scan the QR code displayed in the Try Mobile Mashup window to connect with the Pega Platform instance.
  Enter the URL that you entered in the URL field and enter the credentials manually.
4. Click the Mashups tab.
5. For the Create new work action, verify that you can create new work by clicking the case name that you specified, and then checking the app branding.
Optional: To see how different devices display the mashup code, use the preview functionality.
For more information, see Previewing an application.

The preview functionality uses a wrapper that functions as a portal for displaying a frame with the mashup code. You modify the appearance of the default wrapper by editing the HTML and CSS settings in the pyMashupComposerPreviewHTML and py-preview-mashup-styles rules, and control the appearance of the mashup code by editing a styling rule that is defined in the Skin name field.
Copy the HTML code from the Mashup code text area to the clipboard by clicking Copy.
Click Save.

What to do next: To use the mashup code, paste the HTML code into a static web page or webview of an external web application.

Note: If you put multiple mashups on a single web page, you must only include the mashup static script, pzIncludeMashupScripts, once in the HTML code.