Handling personalized content in a cobrowsing session

In commerce applications a page may contain personalized content for example a user's shopping cart or a targeted product recommendation.

When two users are cobrowsing using the CEA widgets the personalized sections of the page may be completely different. In this scenario it makes sense to block the users from highlighting the personalized content. This will minimize the chance of a user trying to highlight and draw attention to content that is not shown on the peer user's page.

This can be done by writing a callback function and then specifying the function name for the isHighlightableCallback attribute of the CEA widgets:

<div ceadojoType="cea.widget.Cobrowse" joinCollaborationURI="PlantsByWebSphereAjax/cobrowse.html" defaultCollaborationUri="index.html" isHighlightableCallback="cobrowseHighlightable"></div>

This callback function will be called each time a user mouses over a HTML element after clicking the highlight button. If the function returns true the element's style will be updated to show that it can be highlighted. If it returns false no change is made. If the user attempts to click on an element that is not highlightable a warning message will be displayed.

The callback function is passed in the current HTML element and must return a boolean, beyond that the application developer has the freedom to decide how to determine if an element is highlightable . For example in the sample code below we want to disallow the user from highlighting the shopping cart:

function cobrowseHighlightable(node) {
// Summary: Callback function to allow the application
// to determine if a specific node is highlightable
if (node.id == "ibm_widget_HtmlShoppingCart_0"){
return false;
} else {
//If this is not the shopping cart then use the default logic
// to make sure its a highlight element
var highlightElementArray = ["DIV","SPAN","TR","TH","TD","P"];
var isHighlightableElement = false;
for (var i=0; i

This example uses the node.id to determine that the element is the shopping cart and then returns false so that it will not be highlighted.

One other note is that specifying the callback function overrides the default processing of the highlightElementList. The highlightElementList is used to determine what HTML elements can be highlighted. The sample code above shows how to add this logic if needed for your callback.