Skip to main content


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

Custom code in the web embed snippet

Updated on October 21, 2022
Applicable to Cosmos React applications

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.

Customizing autogenerated markup

For example, a sample HTML markup that you generate in App Studio might be as follows:

<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>

You can customize it by adding an attribute, for example startingFields:

<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' 
startingFields='{"Priority":"Normal","Language":"English"}' </pega-embed>

The startingFields attribute passes values to the new case. In this way, you can set up defaults for your case.

Notes on code

The definition of the <pega-embed> web component is in the pega-embed.js file that is located on the Constellation service. The script tag must come before the <pega-embed> tag.

For JSON structures, such as the ones that the startingFields attribute uses, single quotes are recommended.

You can also manipulate the web component by using standard HTMLElement methods. For example, you can use a document.createElement("pega-embed") to create an element and pass structures. Alternatively, you can use a mixed approach with some HTML markup and some JavaScript by specifying deferLoad="true" and then obtaining a reference to the element using the specified ID to update or define attributes. For example:

<script>
        let el = document.getElementById("theEmbed");
        let options={"accountID":37394984,"Rewards":"Platinum"};
        el.setAttribute("startingFields", JSON.stringify(options));
        el.load(); 
</script> 
Note: The fields you set in the startingFields attribute must be exposed in AllowedStartingFields. For more information, see Adding fields while creating cases in DX API v2.

Discover the attributes, methods, and events supported by the web embed in the following articles:

  • Attributes in web embed

    You can add a number of attributes to your web embed snippet to expand its functionality.

  • JavaScript methods in web embed

    The host page can use JavaScript (JS) to invoke methods that support querying or manipulating the web embed. This functionality provides you with the tools to meet the needs of your particular use case.

  • Events in web embed

    The host page can add event handlers that execute and perform custom processing when specific supported events fire, which helps you better integrate Pega UI with the host environment.

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