Constellation Web embed
With Constellation, Web embed allows you to embed specific Constellation landing pages and Case experiences into your existing web assets regardless of your front-end framework. You can choose parts of a Pega Platform™ UI that suit your business needs and make them available to users of other websites by creating a Web embed Channel and inserting the auto-generated markup into any web page.
You can create a new Web Embed using the options on the Channel tab in App Studio. The web embed relies on HTML5 web components. After configuring your web embed settings, you can generate the web embed HTML snippet. Then paste the code snippet into a static web page or webview of an external web application to display the application.
Note: For more information on creating a new web embed in App Studio, see Creating web embed.
The following figure displays a Constellation View in a Pega application Portal:
The following figure displays the previous Constellation View, but using Pega's Web embed functionality to incorporate it into a non-Pega website:
Web embed functionality
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.
Similarly, you can add JavaScript code to invoke one of the supported methods and add event handlers to listen for and react to specific supported events. This approach helps you adapt the web embed to your needs.
Note: For more information on using JavaScript code, see Custom code in the web embed snippet and JavaScript methods in web embed.
Pega Platform supports more than one web embed on the same page. When you deploy multiple web embeds on the same page, the first embed on the page uses HTML5 Web Components, but every additional web embed requires the use of a container attribute that wraps it in an <iframe> container. In addition, using multiple web embeds requires you to separate all client-side UI generation logic from other embeds.
Note: For more information on deploying multiple web embeds on the same page, see Multiple web embeds on the same page and Attributes in web embed.
When creating a web embed channel in App Studio, you can select an out-of-the-box theme. Web embeds use the Constellation design system by default and support limited branding through out-of-the-box theme authoring options to enable low-code developers to configure a web embed experience that matches the branding of the host site. The Web Embed script also supports theme parameters to customize the look and feel of embedded applications to allow a seamless integration with external sites. Advanced styling is available using the theme JSON object or branding with SDK.
Note: For more information on branding web embeds, see Best practices for branding web embeds.
Authentication ensures that only users and systems with verified identities can use the web embed, and that all permitted data manipulation occurs under the current user identity. Web embeds support a number of configurations using the OAuth 2.0 protocol to allow external applications to access Pega Platform™ REST services by using access tokens. Web embeds support silent authentication by using OAth 2.0 grant types to define the way an application gets an access token.
Note: For more information on authentication, see Authentication in web embeds.
Check your knowledge with the following interaction:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?