Skip to main content


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

Creating web embed

Updated on October 21, 2022
Applicable to Cosmos React applications

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.

Before you begin: Ensure that you have at least one case type in your application. For more information, see Creating a top-level case type.
  1. In the navigation pane of App Studio, click Channels.
  2. In the Create new channel interface section, click Web Embed.
  3. On the New web embed interface form, in the Basic options section, in the Name field, enter a name for the channel.For example: Enter Feedback item.
  4. Optional: To distinguish this channel interface from other embedded channel interfaces, in the Description field, specify the purpose of this channel interface.For example: Enter Case type for user feedback.
  5. In the autopopulated URL field, verify the URL for your Pega Platform instance.
  6. In the Static server URL field, verify the URL of the Constellation Static Content service.
  7. In the Authentication service field, select the name of the authentication provider for the web embed.
  8. In the Configuration section, in the Action list, select an action for the embedded code:
    • To enable users to create a new case, select Create a case, and then, in the Case type field, select the target case type.
    • To load a specific page, select Display a page, and then, in the Page field, select the target page.
    The Administration landing page is not supported in web embeds.
    • To open an assignment, select Open an assignment, and then, in the Assignment ID, enter the target assignment ID.
    • To open a case by ID, select Open a case, and then, in the Case ID field, enter the ID of the target case.
    For example: Select Create a new case, and then, in the Case type field, enter New feedback.

    Sample web embed configuration
    Filled in settings for a web embed that opens a New feedback case.

  9. For case and assignment actions, in the Display option field, select what appears in the web embed.
  10. Optional: To delay the loading of the main content on the host web page until an event occurs, turn on the Defer embed load switch.
  11. In the What is web embedding? section, click Generate web embed code.
  12. In the Show web embed code snippet window, click Copy.For example: Sample snippet:

    <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>
  13. Close the Show web embed code snippet window.
  14. Click Save.
  15. Paste the HTML snippet from the Show web embed code snippet window into a static web page or webview of an external web application to display your embedded case.
Result: When you next load your host site, host page displays the application.For example:
The feedback item embedded in a host page
An external page with the embedded feedback item mashup

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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