Tuesday, June 22, 2010

Mobile widget support in the latest CEA refresh

The latest 1.0.0.5 release of CEA Feature Pack is now available at this site

The refresh includes the following updates:

  • New Web 2.0 mobile widgets deliver versions of Click to call, Call Notifications, Contact Center Co-browsing, Peer-to-peer Co-browsing and Two Way Synchronized Forms optimized for iPhone and Android mobile browser applications.

  • Web 2.0 mobile widgets extend multi-modal communications across desktop and mobile browsers.

  • Helps customers build applications with native mobile web application look and feel.

  • Support for mobile specific interactions such as touch and gesture support for selecting, scrolling and zooming on mobile browsers.

  • Enables mobile users to Co-browse with desktop or mobile users.

Tuesday, June 15, 2010

Start a Cobrowsing Session on the Current Page

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.

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>

Monday, May 3, 2010

New CEA videos..

Two more demo videos aside from the one in the last post. We'll be using some of these in the IBM Impact 2010 sessions that I referenced here

The first one is doing some of the contact center widgets (like click to call then cobrowsing) on the iPhone:



The next is a shorter and HD version of our JavaScript widget walk through:

Friday, April 30, 2010

CEA Impact Sessions

In case you are looking to learn more about Communications Enabled Applications (CEA) at Impact, here are some talks you can come into:
Enabling Cobrowsing and Coshopping on your website - 2040A Tue, 4/May 10:15 AM - 11:30 AM Venetian - San Polo 3506
Adding Rich Interaction Support to your Enterprise Application - 2272A Wed, 5/May  10:15 AM - 11:30 AM Venetian - Lido 3103

Also, we have a lab on Enabling Coshopping and Two Way Forms on your Web Applications with CEA - 2027A Tue, 4/May 04:45 PM - 06:00 PM Venetian - Murano 3304

Finally, here is a less than 3 minute video showing cobrowsing and the new mobile widgets we have made available and will be demoing at Impact here as a tech preview

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.

Thursday, April 29, 2010

CEA Mobile Widgets Technology Preview

One of the questions that keeps coming up, when people see a demo of the CEA widgets or try them out, is - "Will the widgets work with mobile devices?".

Since mobile devices have their own unique challenges around screen real estate and also touch interactions we have developed new versions of the CEA widgets, Click to call, Call notification and Cobrowse optimized for the iPhone and Android mobile browsers.

Fore more information and to download the updated ceadojo toolkit check out the
Communications Enabled Applications Mobile Widgets Technology Preview

Also if you would like to see the new widgets in action checkout the following video!