Embedding Pega Platform UI in web pages
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.
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>
the element must first be loaded. For the
pega-embedcustom element, this is accomplished by the HTML script reference to
- All custom elements, including the
pega-embedelement, 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
https:protocols. Local HTML files that use Web Component markup are not supported. The
http-server npmmodule provides a way to serve up local files using the
- 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.
Previous topic Converting your UI for right-to-left languages Next topic Creating web embed