A common scenario is to embed the CEA widget in a page fragment that is used across all the pages in the application. For example, for a commerce application, the widget may be displayed as part of the individual product pages. When enabling contact center or peer to peer cobrowsing for these pages the ideal scenario is start the session on the page the user is currently browsing. This can be achieved through a few simple steps.
First the initial steps to import the JavaScript and CSS are the same. However, instead of the div tag to place the widget on the page instead we will add a placeholder div. Next we will programmatically initialize the widget. Using this approach we can then pass in the current page for
joinCollaborationURI and
defaultCollaborationUri using window.location.href. The final step is to get a reference to the container div and then append the newly created widget as its child.
<div id="cobrowseContainer"></div>
<script>
if ( window.top._ceaCollabDialog == null){
this.cobrowse = new cea.widget.Cobrowse({
joinCollaborationURI: window.location.href,
defaultCollaborationUri: window.location.href
});
var container = document.getElementById('cobrowseContainer');
container.appendChild(this.cobrowse.domNode);
}
</script>
We can also wrap the code to create the widget in a check to see if the page is currently displayed in the CollaborationDialog and if so we can skip creating the widget.
