Manage the business processes of clients who use external software by
embedding a case into their external web page in the form of a web mashup. For example,
you can embed a case type for processing job applications on a web page that displays
By generating mashup code in HTML and inserting it into an
external web page or application, you enable users to interact with Pega content and create
cases even without having access to Pega Platform software.
Before you begin:
- Create a case type that you want to insert into an external web page or
application. For more information, see Case types.
- Ensure that the Enable samesite cookies check box is
- 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.
What to do next: Paste the HTML code that you copy into a static web page
or webview of an external web application to display your embedded case.Note: To put
multiple mashups on a single web page, include the mashup static script
pzIncludeMashupScripts, in the HTML code only
- In the navigation pane of
App Studio, click Channels.
- In the Create new channel interface section, click
- On the New Web mashup interface form, in the Basic options
section, in the Name field, enter a name for the mashup
that you want to use to create case types.
- Optional: To distinguish this channel interface from other Mashup channel interfaces, in
the Description field, specify the purpose of this
channel interface.For example: Enter Case type for processing job
- In the autopopulated URL field, verify the URL for a
Pega Platform instance.
- Optional: To generate the mashup snippet with URL encryption, turn on the Use
Note: When the Use encryption switch is on, dynamic
parameters are not supported.
- In the Configuration section, in the
Action list, select Create a new
- In the Case type list, select a case type that you want
- In the Flow name field, enter the case type starting
Note: The starting process applies only to case types without the Create stage.
For more information, see The Create stage.
- In the Thread name field, enter the name of the thread
that handles the mashup.
- Optional: To load the mashup gadget as the last item on the page, turn on the
Defer mashup load switch, and then initiate the
mashup load process in the onload event of the host page.
- Optional: To retain the state of the case after the user refreshes the browser that
displays the mashup, turn on the Retain mashup state on browser
Note: Consider the following limitations when using this option:
- The option to retain the case state is not backwards-compatible by
- The option to retain the case state works only if the user loads the
mashup gadget on the same thread, and the thread is available during
a browser refresh. This means that this setting does not work if the
user sets the thread name dynamically while loading the mashup.
- The state is retained if the reload occurs in the same session.
- The option to retain case state does not work for temporary work
objects, for which the system does not generate work IDs.
- Optional: To validate dynamic parameters in the mashup request, turn on the
Allow passing dynamic parameters switch.
- Configure the output options for the mashup:
- In the Skin list, select the skin rule that you
want to use for the mashup.
- In the Iframe resizing list, select the resize
mode for the mashup.
- In the Initial skeleton list, select the
skeleton to provide a template for the mashup.
Tip: You can check how the skeleton renders the content by
clicking Skeleton preview.
- Optional: To add a parameter, for example a parameter for custom authentication, in the
Custom parameters section, click the Add a
row icon, and then enter a parameter name and value.
- In the What is a mashup section, click Generate
mashup code, and then, in the Mashup code
window, select the type of code that you want to copy:
- To copy the iFrame code, above the iframe code
window, click Copy.
- To copy the mashup code, above the Mashup code
window, click Copy.
Note: Selecting the iframe code improves the response time of a mashup, but does
not support passing dynamic parameters.
- Close the Mashup code window.
- Click Save.
- Optional: To preview how different devices display the mashup code, in App Studio, click Preview
application, and then select the channel that you want to
preview by clicking the channel name next to the application name.