Collaborate and cobrowse in web applications

WAS v8.5 > End-to-end paths > Communications enabled applications
Collaborate and cobrowse in web applications

We can embed the Cobrowse widget in an application so that users can share the same browsing session, with one user controlling the session. We can use the Dojo Toolkit that comes with the CEA feature to embed the CEA widgets in the applications.
Dojo widgets are prepackaged components of JavaScript code, HTML markup and CSS style declarations used to enhance web sites with interactive features. We can use the Dojo Toolkit that comes with the CEA feature to embed the CEA widgets in the applications.
Deprecated feature: CEA Dojo widgets encapsulate various user interfaces that are based on the CEA Rest API. These widgets are deprecated. We can also obtain the source for these widgets from developerWorks ..
A cobrowsing session allows two web users to share the same browsing session. One user controls the session; the other user has no control, but can view the activity of the other user. A modal window is a secondary window that requires the user to interact with it; the modal window must be closed before the user can return to the main application.
The Cobrowse widget can be customized to match the look and feel of the page by modifying the CSS file. The widgets are also extensible, allowing the user to create their own custom version to handle more advanced tasks.
In addition to listing the steps needed to enable applications with cobrowsing, this task includes details about how to enhance the application and configure the application server.
This task lists the steps needed to enable collaboration and cobrowsing in an existing application. To quickly learn how the CEA widgets work in an online application, we can install the PlantsByWebSphere Ajax Edition for CEA (PlantsByWebSphereAjax) sample application. For more information about the sample application, see the supporting documentation provided in the PlantsByWebSphere directory of the CEA samples package that we can download from the Samples page. Additionally, read about setting up and using the communications enabled application samples.
In the following procedure, complete either Step 3 or Step 4. Step 3 enables the widget for desktop browsers. Step 4 enables the widget for Apple and Android mobile browsers.

Enable the system application.
Copy the CEA widgets into the application you are enhancing.
Embed the widgets in the application you are enhancing.
Embed the mobile widgets in the application you are enhancing.
Install and start the application you are enhancing.
Test the application you are enhancing.

Procedure
Enable the system application.
The system application owns the REST interface. Update the configuration for each server running CEA.

Access the CEA settings panel in the dmgr console.

In a single-server environment, click...
Servers | Server Types | WebSphere application servers | server_name | CEA

In a clustered environment, click...
Servers | Clusters | WebSphere application server clusters | server_cluster | CEA

Because servers in a cluster are clones of each other, you only need to make configuration changes from the main cluster panel for the cluster, not for each individual server in the cluster.

Ensure the check box labeled Enable communications service is checked.

Copy the CEA widgets into the application you are enhancing.
The CEA widgets are included in the Dojo Toolkit installed at app_server_root/etc/cea/javascript. Copy the ceadojo directory into the WebContent directory of the application.
Embed the widgets in the application you are enhancing.
Add the following JavaScript code to import the Dojo Toolkit that is included with the CEA feature.
<script type="text/javascript" 
        src="<contextRoot>/ceadojo/dojo/dojo.js" 
        djConfig="parseOnLoad: true, isDebug: false"> </script>
If the page is already using a version of Dojo, add the following JavaScript code instead of the previous step to enable multiple versions of the Dojo on the same page.
<script type="text/javascript">     var djConfig = { baseUrl:"<contextRoot>/ceadojo/dojo/" };
</script> 
<script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js"></script>
Place the widget on the page using the following HTML code.
<div ceadojoType="cea.widget.Cobrowse" 
     joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/test_Cobrowse.html" 
     defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
Replace "<contextRoot>/" with the context root of the application.
Relative URIs can also be used instead of specifying the paths including the context root. The joinCollaborationUri, however, must be specified as an absolute or full URI.
The joinCollaborationURI attribute specifies the page to which the Cobrowse peer is taken. This page must include the Cobrowse widget and be able to accept an additional parameter as part of the request.
To configure the default page shown when the Collaboration Dialog is launched, update the defaultCollaborationUri attribute.
Override the widget CSS if necessary to match the look and feel of the page.
Use the following example HTML code to place the Cobrowse widget on a web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Cobrowse Widget</title> 

    <style type="text/css"> 
        @import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
        @import "<contextRoot>/ceadojo/cea//widget/Cobrowse/Cobrowse.css";
        @import "<contextRoot>/ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
    </style> 
    <script type="text/javascript" 
            src="<contextRoot>/ceadojo/dojo/dojo.js" 
            djConfig="parseOnLoad: true, isDebug: false"></script> 

</head> 

<body class="tundra">     <div ceadojoType="cea.widget.Cobrowse" 
         joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/test_Cobrowse.html" 
         defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html"> </body> </html>
Cobrowse widget attributes and descriptions

ceaContextRoot

The context root to access the CEA service.

joinCollaborationURI

Used by the Peer to peer cobrowsing widget to generate the invitation link that can be sent to the peer. This needs to be a link to a page containing the Peer to peer cobrowsing widget and can accept an additional request parameter. Commonly this will be a link to the current page you are adding the widget to or a specific page created with instructions detailing how to use Peer to peer cobrowsing.

canControlCollaboration

Whether this widget will be able to drive the collaboration session.

defaultCollaborationUri

What page to load first when the Peer to peer cobrowsing is started.

highlightElementList

A comma-separated list of HTML element types that can be highlighted during a cobrowsing session.

isHighlightableCallback

Name of the callback function to run to determine if the current element is highlightable. If not provided only the highlightElementList will be used.

isClickableCallback

Name of the callback function to run to determine if the current element is clickable. This is useful to block certain actions from being run when follow me mode is enabled.

sendPageUrlRewriteCallback

Name of the callback function to run when send page is called to rewrite the current URL. This is useful when one of the peers will be using a Proxy to access the web application.
Embed the mobile widgets in the application you are enhancing.
Add the following viewport metatag to make the widget display in full-screen mode.
<meta name="viewport" 
      content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Import the default Dojo and Cobrowse widget CSS.
<style type="text/css"> 
   @import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
   @import "<contextRoot>/ceadojo/dojox/mobile/themes/iphone/iphone.css";
   @import "<contextRoot>/ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";
   @import "<contextRoot>/ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
   @import "<contextRoot>/ceadojo/cea/mobile/widget/iFrame/iFrame.css"; 
</style>
Add the following JavaScript code to import the Dojo Toolkit that is included with this product.
<script type="text/javascript" 
        src="<contextRoot>/ceadojo/dojo/dojo.js" 
        djConfig="parseOnLoad: true, isDebug: false"></script>
If the page is already using a version of Dojo add the following JavaScript code instead of the preceding code. This code enables multiple versions of the Dojo on the same page.
<script type="text/javascript">         var djConfig = { baseUrl:"<contextRoot>/ceadojo/dojo/" };
</script> 
<script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js"></script>
Add the following JavaScript to hide the location bar for the browser, and display the widget in full-screen mode.
<script type="text/javascript">    window.onload = function() {
      setTimeout(function(){window.scrollTo(0, 1);}, 100);
   }
</script>
Place the widget on the page using the following HTML code.
<div ceadojoType="cea.mobile.widget.Cobrowse" 
     joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/
     test_Cobrowse.html" 
     defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
The joinCollaborationURI attribute specifies the page to which the Cobrowse peer is taken. This page must include the Cobrowse widget and be able to accept an additional parameter as part of the request.
To configure the default page shown when the Collaboration Dialog is launched, update the defaultCollaborationUri attribute.
Override the widget CSS if necessary to match the look and feel of the page.
Use the following example HTML code to place the Cobrowse mobile widget on a web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml"> 

 <head> 
   <title>Cobrowse Widget</title>    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1,
       maximum-scale=1, user-scalable=no"/> 
   <style type="text/css"> 
      @import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
      @import "<contextRoot>/ceadojo/dojox/mobile/themes/iphone/iphone.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/iFrame/iFrame.css"; 
   </style> 
   <script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js" 
      djConfig="parseOnLoad: true, isDebug: false"></script> 
   <script type="text/javascript">       window.onload = function() {
         setTimeout(function(){window.scrollTo(0, 1);}, 100);
      }
   </script> </head> 

<body class="tundra">    <div ceadojoType="cea.mobile.widget.Cobrowse" 
        joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/
        test_Cobrowse.html" 
        defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html"> </body> 
</html>
Cobrowse mobile widget attributes and descriptions

ceaContextRoot

The context root to access the CEA service.

joinCollaborationURI

Used by the Peer to peer cobrowsing widget to generate the invitation link that can be sent to the peer. This needs to be a link to a page containing the Peer to peer cobrowsing widget and can accept an additional request parameter. Commonly this will be a link to the current page you are adding the widget to or a specific page created with instructions detailing how to use Peer to peer cobrowsing.

canControlCollaboration

Whether this widget will be able to drive the collaboration session.

defaultCollaborationUri

What page to load first when the Peer to peer cobrowsing is started.

highlightElementList

A comma-separated list of HTML element types that can be highlighted during a cobrowsing session.

isHighlightableCallback

Name of the callback function to run to determine if the current element is highlightable. If not provided only the highlightElementList will be used.

isClickableCallback

Name of the callback function to run to determine if the current element is clickable. This is useful to block certain actions from being run when follow me mode is enabled.

sendPageUrlRewriteCallback

Name of the callback function to run when send page is called to rewrite the current URL. This is useful when one of the peers will be using a Proxy to access the web application.
Test the application you are enhancing.

Browse to the page with the embedded Cobrowse widget.

Click the Create Invitation Link button.
Select and copy the URI that is returned in the Invitation Link field.
Open a separate browser or tab and paste the invitation link into the web address field.

From the first browser, browse within the modal window.
Observe the second browser mimics or follows the first.
To end, exit either modal window, and click the End Collaboration button.
Results

You have enabled the Cobrowse widget within an application, which allows users to share and direct a browsing session with a web browsing partner.

When you test the widgets, use two completely separate browsers, or the same browser on two separate machines. Using tabs in the same browser, or even launching separate instances of the same browser on the same machine, will cause session issues.

Enable browser cookies to allow the CEA widgets to store state information about the active widget session. This process enables the user to access another web page with the embedded CEA widget or refresh the current page while keeping the widget session active. If we disable cookies and access another page with the embedded CEA widget or refresh the current page, the CEA widget loads to the default state.

Related
Assemble applications
Set up the communications enabled application samples
Samples documentation
CEA collaboration flow
Multiple Versions of Dojo in a Page

+
Search Tips | Advanced Search