Communications Enabled Applications: Peer to Peer

Showing posts with label Peer to Peer. Show all posts

Thursday, May 27, 2010

Create a Page Allowing a Mobile User to Invite a Desktop User to Cobrowse

One of the cool new features offered in the CEA Mobile Widgets Technology Preview is the ability to have a desktop user cobrowsing with a user on a mobile device. Since at the time the first user creates the invitation link we don't know if they will share it with a desktop or mobile user we can create the invitation link to a landing page that will re-direct to the page with the appropriate widget.

There are 4 steps to create this landing page. Using JavaScript first strip off the invitation information from the current page. Next check the user agent to determine if the page is running in a mobile browser. If so then redirect to the page containing the mobile widget otherwise redirect to the page for the desktop browser widget. In both cases append the invitation link information. The last step is to edit the joinCollaborationUri attribute in the existing pages for both the mobile and desktop cobrowse to point to this new landing page.

Here is a sample of the HTML/Javascript code for a basic cobrowse landing page:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CEA Cobrowse Widget</title>

<script type="text/javascript">
   var CEA_COLLAB_PREFIX = "cea_collab=";
   var    href = document.location.href;
   var cobrowseString = "";

   if ( -1 < href.indexOf(CEA_COLLAB_PREFIX)){       
       index = href.lastIndexOf(CEA_COLLAB_PREFIX);
       collabID = href.slice(index + CEA_COLLAB_PREFIX.length);
       cobrowseString =  "?" + CEA_COLLAB_PREFIX + collabID;
   }

   if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) {           
       window.location = "/cea/cobrowse_mobile.html" + cobrowseString;
   } else {
       window.location = "/cea/cobrowse_desktop.html" + cobrowseString;
   }
</script>

</head>
</html>

Friday, April 30, 2010

Add the Mobile Cobrowse Widget to your Application

After downloading and unzipping the ceadojo.zip directory into the WebContent directory of your application these 5 simple steps will get you up and running with the CEA mobile cobrowse widget:

1. Configure the widget page to be full screen and non-scalable using the viewport meta tag

<meta name="viewport" content="height=device-height, width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>

2. Import the CEA widget toolkit

<script type="text/javascript" src="./ceadojo/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"></script>

3. Add the CSS for the mobile cobrowse widget

<style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojox/mobile/themes/iphone/iphone.css";
@import "ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
@import "ceadojo/cea/mobile/widget/iFrame/iFrame.css";
</style>

4. Add the following JavaScript code to hide the location bar when the page loads

<script type="text/javascript">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>

5. Last place the widget as the only element in the page using the following HTML snippet

<body class="tundra mbl iphone">
<div ceadojoType="cea.mobile.widget.Cobrowse" joinCollaborationUri="/cea/cobrowse.html"
defaultCollaborationUri="/"></div>  
</body>

Thanks to Steps 1 and 4 when the page loads in the mobile browser it will display full screen as well as scrolling to hide the location bar. This gives the widget an 'app-like' look and feel as well as allows the user to take advantage of all the screen real estate offered by their device.

Wednesday, August 5, 2009

Retailers need WebSphere CEA

There have been so many times lately that I have been realizing that websites need the WebSphere CEA features and functions. Recently my wife was shopping online and trying to send me links and describe over instant messaging what she was seeing. It was painful and we finally decided we would hold off until later that evening. We forgot that night and looked again at it a day later. That was a sale that was almost lost. Actually, to be honest, the sale was lost...but had we had peer to peer cobrowsing on that site we may have purchased it that first day.

I have also had the experience many times when buying gifts where I knew nothing about the subject matter and had to call a company or visit their store. Whether it was custom jewelry I bought my wife for mother's day or shopping for something for my own mother, there are times I just need more information than I can find online.

After talking to a major US retail company the past couple of days it became evident that our CEA functions when shown were much more amazing. This is why I made the video above, to show this typical experience I have when shopping for something and I need help. But the ability to shop with a friend brings a whole new experience to online shopping and could help drive another boost to online commerce sites. Below I have shown a video describing how that interaction might work.

There are other major areas when seeing something online would be useful when on the phone. For example, last year it was apparent our credit card info was stolen and had to call into Chase and describe the transactions that were invalid. We could have saved time if I could have shown them which transactions through a couple of clicks rather than describing them. But security is a constraint...can you show your customer information without security? How about without a plugin? The CEA FEP does this with security, using the application's current security model. There is no plugin, its all Javascript. It requires some new thinking - but not necessarily new code. :-) We'll talk more about secure cobrowsing soon...

Wednesday, July 1, 2009

Embedding the CEA Peer to Peer Cobrowsing Widget

The first step when embedding any of the CEA widgets into your application is to copy the ceadojo directory ( <washome>\feature_packs\cea\javascript\ceadojo ) into your application.

Based on where you copied the ceadojo directory you will need to use that path when pointing to the various JavaScript and CSS files. For this post I will assume that I've copied the ceadojo directory directly under the context root and the HTML file that I am adding the widget to is at the same path.

For the Peer to peer cobrowsing widget we need to import the following CSS files:

<style type="text/css">
@import "./ceadojo/dijit/themes/tundra/tundra.css";
@import "./ceadojo/cea/widget/Cobrowse/Cobrowse.css";
@import "./ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

The next step is to import the CEA widget toolkit. Importing the CEA widget toolkit is just like importing any other Dojo toolkit.

<script type="text/javascript" src="./ceadojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>

The CEA widgets are built on top of Dojo's Tundra theme. So next we need to add this theme to the body:

<body class="tundra">

And finally the last step is to place the CEA widget on the page. The following HTML code snippet will place the Peer to peer cobrowsing widget on the page:

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

There are a few additional attributes that need to be configured for Peer to peer cobrowsing.

joinCollaborationURI is 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 that contains the Peer to peer cobrowsing widget and can accept an additional request paramater. 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. For example in the plants sample we used the same page we added the widget to "/PlantsByWebSphereAjax/cobrowse.html"
defaultCollaborationUri specifies what page to load first when Peer to peer cobrowsing is started. For example in the Plants sample we used "/PlantsByWebSphereAjax/index.html"

Wednesday, May 6, 2009

Peer to Peer cobrowsing in retail makes for a real coshopping experience?

A couple of days ago, Savio wrote more about utilizing our peer to peer cobrowsing functionality. Today at Impact 2009, we demonstrated WebSphere Commerce utilizing the peer to peer cobrowsing widget to allow for a coshopping environment. In this, Daisy Tan extended the cobrowsing functionality to add instant messaging into a Commerce deployment so that users of that could cobrowse and instant message with one another in the cobrowsing modal window. Perhaps I will get a demo of that integration up later, but for now here is a homemade video of the peer to peer cobrowsing with the sample provided in the feature pack. This shows a simple scenario for coshopping within the application. Our demonstration could have been just as easily a travel planning application, insurance benefits application, or any number of applications allowing two people to view a similar page and use the web as another communication modality. Check it out and let us know what you think! (aside from the fact that I am obviously not a professional voiceover guy or video editor ;-) )

Sunday, May 3, 2009

Your applications need a dose of CEA - Peer to Peer Scenario

In my previous post I mentioned that the WAS V7 Feature Pack for CEA Beta can help you create some pretty awesome user experiences for multi-modal online interactions. Well, what does that really mean? I've already covered the Contact Center scenario. Now, let's discuss a Peer to Peer scenario.

Your loyal customers, Savio and Hilary, always use your travel planning website to decide on itineraries and book travel.

Savio is away at IMPACT for a week. This leaves Hilary alone with their two month old. Erik, Savio's wise friend suggests Savio take Hilary on a vacation as a "thanks for putting up with me and rearing our child while I travel". Hilary loves to be involved in vacation planning. But Savio's in Vegas and Hilary's in Toronto (See P.S. below). Savio IM's Hilary and proposes the vacation idea. She's in. Now the tough part. Deciding where, which flight, hotel and car. It's made tougher by the fact that their multi-modal interaction is not linked in any way.

If Savio and Hilary continue the interaction over IM, they're forced to send URLs back and forth to keep track of the itinerary item that the other person is looking at. But then, they'd also have to type "flight #348 will get us in on time" and similar information into the IM application. But switching over from IM to the phone is no better because they still have to describe which page each person is on, (spelling out a URL over the phone...FUN!?!?), and which flight they are looking at etc. Savio and Hilary are in for a poor user interaction no matter how you slice it.

We designed the WAS V7 Feature Pack for CEA Beta to address a scenario of two users trying to jointly make a decision through a multi-modal interaction.

Peer to Peer Cobrowsing
Let's start the same scenario off with a Peer to Peer Cobrowsing Web Widget that is delivered in the WAS V7 Feature Pack for CEA Beta. Savio would click on the "Invitation Link" button on your website and IM it to Hilary. Once Hilary clicks the link, Savio and Hilary would be in a shared session together. There's not software for Savio or Hilary to install to enable this shared session. In fact, Savio and Hilary have individual sessions with WebSphere Application Server, so there's an added layer of security. Calling this feature Peer to WebSphere Application Server to Peer, while perfectly okay with the IBM Naming Police, seemed cumbersome. Ease of use and security? Check.

With this shared session both Savio & Hilary can take control and direct what is shown on the other person's browser window. Both can highlight elements on the page for the other person to see. Vastly improved user experience? Check.

And of course, if either needs more information before deciding, they could use the Click to Call feature enabled by the WAS V7 Feature Pack for CEA and enter into a joint session with one of your customer service representatives. I described this scenario before.

Want to learn more?
Get the WAS V7 Feature Pack for CEA Beta here and the Getting Started guide, part of the Library materials, here. Also, here's a good description of the widgets from Erik. Finally, if you need a copy of WAS V7, you can get a trial here.

Let us know what you think!

P.S.: Hilary and I planned our last trip sitting beside each other, with our individual laptops scouring Expedia for info. It was painful to keep track of the itinerary item that the other person was suggesting. So, while the scenario above describes two geographically separated users, I'm certain it'll apply to two users sitting beside each other on a couch! What that says for our society is a different story ;-)

Communications Enabled Applications