Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Embedding Pega Platform UI in web pages

Updated on October 21, 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 first be loaded. For the pega-embed custom element, this is accomplished by the HTML script reference to pega-embed.js.
  • All custom elements, including the pega-embed element, require a start and end tag. A self-closing tag style is not supported.
  • 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. The http-server npm module provides a way to serve up local files using the http: or https: protocol.
  • 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.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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