Skip to main content

Embedding Pega Platform UI in web pages

Suggest edit Updated on June 1, 2022
Applicable to Cosmos React applications

You can choose parts of Pega Platform UI that suit your business needs and make them available to users of your websites by creating a Web embed channel and inserting the auto-generated markup into any web page.

Web embedding helps you incorporate specific Cosmos React landing pages and case experiences into your existing web assets regardless of your current adopted front-end framework.

An embedded channel in an external web page
Skeleton of an external web page with a Pega embedded channel

Unlike the Pega web mashup which uses <iframe> components, the web embed in a Cosmos React application relies on HTML5 Web Component. This standard provides a means of defining custom full-fledged HTML elements, such as the pega-embed tag in the following example:

<script src='https://static.pega.com/pega-embed.js' ></script>
<pega-embed id='theEmbed' action='createCase' caseTypeID='OPB1HW-Compass-Work-NewFeedback' 
appAlias='compass' pegaServerUrl='https://sample.pega.com' staticContentUrl='https://static.pega.com/' 
authService='pega' clientId='55781676112059009508' >
</pega-embed>
Note:
  • Before using a custom element, the JavaScript code that defines the behavior of the element must be loaded onto the web page. This is accomplished by the HTML script reference to pega-embed.js.
  • The web embed code requires a start tag with assorted attributes and attribute values and an end tag.
  • Web Components tags work only when the page is served from a web server that uses the http: or https: protocols. Local HTML files that use Web Component markup are not supported.
  • Creating web embed

    Embed existing Microjourney experiences within any web page or application. For example, you can embed a feedback form within your website so that the users who access the page can share their comments.

  • Custom code in the web embed snippet

    The web embed snippet that you generate on the Web embed channel page is ready to use out of the box. However, if your business case requires that the web embed behave in a more complex manner, you can edit the snippet manually and expand it to use additional supported attributes.

  • Troubleshooting web embeds

    Ensure that your web embeds work as intended by learning about potential issues and their resolutions.

  • Authentication in web embed

    Authentication ensures that only users and systems with a verified identity use the web embed and that all permitted manipulations of the data occur as the current user identity.

Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us