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.
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>
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.
Previous topic Creating web embed Next topic Attributes in web embed