You can embed a Pega^® Platform application in another web page or application by using Pega Web Mashup. You can display a case or harness from your Pega Platform application within another application, including applications that were created in the Salesforce Lightning or Visual Force application development environment. For example, if your expense application is created in Salesforce and you have a part of the expense application, like the approval process managed by Pega Case Management, you could embed the Pega portion as a mashup.

Creating mashup code

The first step is to create Pega Web Mashup code. You will add this code to a Salesforce Lightning application that you create later. Use HTTPS because Salesforce allows only secure content within the mashup. To create the Pega Web Mashup code:

1. Log in to your Pega Platform application.
2. Open the case that you want to use in the mashup within your Salesforce application. Click the Settings tab, and then click Integration.
   
3. Click the Generate mashup code link. In the Generate mashup code dialog box, verify the URL of your Pega Platform instance. To learn more, go to the Pega Web Mashup page.
   ​
4. Click Generate code. Copy the mashup code between the <div> tags, excluding the script content, into a text file. You will need the mashup code later.
5. Change the data-pega-redirectguests attribute to false.
6. Copy the script content into a different text file and save the text file as Mashup.js.
   ​
7. In the prconfig.xml file on the Pega Platform server, set authentication/redirectguests=false. This setting is required for all Pega Platform web mashups.
8. Copy the content from the mashup code without the script content. You will add this script content later in the process.

Creating the Lightning application

Create a Salesforce Lightning application. To extend the application to use the Lightning system style sheet, edit the opening tag of the application to <aura:application extends="force:slds">. This change gives you the ability to include Salesforce styles.

1. Add the following sample header between the application tags in your Lightning application:

   <div class="slds">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<p class="slds-test-heading--label>My Application</p>
<div class="slds-grid">
<div class="slds-grid slds-type-focus slds-no-space">
<h1 class="slds-text-heading--medium slds-truncate" title="My application">My Application</h1>
</div>
</div>
</div>
</div>
</div>
</div>

2. Save and preview the application.

Adding the mashup code to the application

For the next part of the process, add the mashup code to the Salesforce Lightning application that you created.

1. Copy the Pega Web Mashup code that you created in the previous procedure and paste it within the <aura> application tags.
2. Include the script that you downloaded earlier. The file containing the script must be named Mashup.js. Create a static resource in Salesforce. Give the static resource a name and description, and select the Mashup.js file that you created earlier. Save the static resource.
   
3. Include the script source in the Salesforce Lighting application by referencing it with <script src="https://docs-previous.pega.com/%7B%21Resource.Mashup%7D"/>.
4. Save the application and preview it.

In your Lightning application, you should now see the tab with the Pega content displayed inside it.

Configuring the application permissions

Because you are opening a channel between the Salesforce application and the Pega Platform application, you need to add the domain of your Salesforce Lightning application to the list of trusted domains in the Pega application rule. This list contains the URLs on which you are deploying the mashup. Be sure to include the site that you will be using to test the mashup.

1. Click the Application menu, and click Definition.
2. Click Integration & Security.
3. At the bottom of the form, in the Mashup security section, add the URLs of the sites to which you added the mashup code.
4. Save the form.

   

The next time you load your host site, the application is displayed in an iFrame. You can customize the appearance and behavior of the mashup by editing the attributes in the mashup code that you generated. You can make mashups responsive, fixed, or styled by using the skin rule.