Create Pega Web Mashup

When you use Pega Web Mashup to embed a Pega Platform™ application in another web page or application, you embed HTML code in a website that accesses the Pega Platform application from a web page. The mashup can exchange information with the host page to customize the user interaction.

To generate a Pega Web Mashup code, create a Mashup channel by using the Channels and Interfaces landing page in either App Studio or Dev Studio, customize the code as necessary, embed that code to a web page, and configure a list of approved sites for the site origin.

Mashup code consists of an HTML SCRIPT tag to access Pega Platform and an HTML code block that identifies the action performed by the mashup. This code block consists of either an IFRAME or DIV tag that represents the Pega Gadget. Gadget refers to the application view provided by the Pega Web Mashup.

The IFRAME and DIV tags support a set of attributes for customizing the behavior of the gadget on the web page. Single quotation marks encapsulate the value for each attribute, and the attribute named PegaGadget specifies the name of the gadget.

When deploying a mashup, copy the generated code to the appropriate location on your web page. At run time, your web page displays Pega Platform content within the IFRAME or DIV element. The default action runs immediately unless the attribute for the action is deferred.

You configure mashup behavior on the Channels and Interfaces landing page. To create a Mashup channel in Channels and Interfaces, enter a descriptive name, mashup description, and the URL of the system hosting the Pega Platform application under Basic options.

Then, select the action performed by the mashup. By default, the Create a new case action is selected.

To customize the mashup behavior, you provide values for the specified attributes. All actions require you to specify:

• The thread in which the action is performed
• A fixed or automatically-sized IFRAME
• The action prompt (for example, the action is invoked when a page loads or is deferred after a button click)

Additional attributes may be necessary depending on the selected action. Optional attributes allow you to:

• Specify the skin used to format the mashup contents
• Encrypt traffic between the web page and Pega Platform
• Defer loading of the mashup
• Select the skeleton used to organize the contents of the mashup

Sizing

You may need to control the display size of your mashup to fit inside a defined area. To control the size of a mashup using the DIV tag, set the data-pega-resizetype attribute to customize the mashup width. By using the mashup attribute data-pega-resizetype, the mashup can fit inside a fixed space (data-pega-resizetype = 'fixed') or it can expand to fill the available space on the page (data-pega-resizetype = 'stretch'). By default, the value of the attribute is stretch.

Clicking Generate mashup code creates the mashup code, which you can copy into the web page using any text editing. After saving your work in the web page, refreshing the page displays the resulting mashup.

Opening a channel between the host site and the Pega Platform application requires you to configure the application permissions by specifying a list of trusted domains in the Pega Application rule. Add the web domains to the application rule as a trusted origin. The list contains the URLs on which you are deploying the mashup and informs Pega that mashup requests originating from the web page are legitimate.

Trusted origins are listed on the Integration and Security tab of the application rule in the Mashup security section.