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>

1 comment: