Understanding Jabber: Part 5–Launching the Jabber Guest Widget

So far in this series I have kept things pretty high level but in this post I am going to go a little under the covers and talk more about Jabber Guest, in particular the widget. Jabber Guest as many of you know by now is based on WebRTC which means its purpose is to ease the amount of effort a web developer needs to expend to include video in a web site.

This post I wanted to expose a few of the things I have done with JavaScript and jQuery to make the widget a little more interesting. Please keep in mind I class myself as a non-developer so those with extensive web design experience may find my efforts comical. Please feel free to correct any errors or suggest alternate methods to improve what I am about to discuss below.

Jabber Guest can be launched from a URL on website and the default Jabber Guest page is launched. This is fine in specific scenarios but there is a bunch more you can do with the widget. Also if you want a customized experience your going to want to take advantage of the widget versus the default page. 

image

Simple Jabber Guest Widget Exposure

For this example I am actually going to use my blog demo.

<iframe height="350" id="jabberc" src="https://ServerFQDN/call/yourNumber@yourDomain.com?widget=true" width="500">https://ServerFQDN/call/yourNumber@yourDomain.com </iframe>

This is pretty simple. As soon as you open the page the widget opens with a pre-configured number. The widget is called out in an iframe so this is the widget used in its most basic format.


image


Exposing the Widget using JavaScript


So lets move this on a little more. This time around lets use a button with a small piece of JavaScript that opens a new window. Its not super elegant but it gets the job done.

<button onclick="openWin()">
Call me Using Jabber Guest
</button>

<script>
function openWin()
{
var myWindow = window.open("https://yourServer/call/yourNumber@yourDomain.com?widget=true","_blank","toolbar=no, scrollbars=no, resizable=yes, top=500, left=500, width=600, height=400 id=jabberc");
}
<script>

This opens a completely new window and has the Jabber Guest widget appear in the new window. Still pretty simple. I have removed all the button formatting from my example code so you will end up with the default button. What this doesn’t do is add any flexibility around the number you call. Its hardcoded into the JavaScript code similar to the first example except now you are doing it in a new window versus opening up the widget in the same browser page.


image


Calling Different Numbers on Launching the Widget


Wouldn’t it be great if we could ask user what number they wanted to dial and then just inject that number into the URL that calls the widget. Yes it would be and the JavaScript below does just that. In my version below I have added a while loop that checks if the string entered by the user is numeric. While in my demo case I wanted this, you may want users to be able to enter alpha as well so just leave out the while loop if you don’t want that.

<button onclick="openPrompt1()">
Guest Bridge Support Using Jabber Guest
</button>

<script>
function openPrompt1()
{
var number = prompt("What is your Bridge Number?","");

while (isNaN(number)){
var number = prompt("Numbers only, please try again?","");}

var myWindow = window.open("https://yourServer/call/" + number + "@yourDoman.com?widget=true","_blank","toolbar=no, scrollbars=no, resizable=yes, top=500, left=500, width=600, height=400 id=jabberc");

}
</script>

See below for the prompt for the bridge number. This is just the default prompt which I am sure most good web designers would want their own stylized JavaScript to do. This is more just conceptual versus final product, just kep that in mind.


image


Once the user has entered a valid number the widget opens in a new window and is ready to roll. Through some simple JavaScript we have now made the widget URL more flexible. In my case I have used it to call a bridge as a MCU guest landing page but I am sure there are other uses.


image


Keeping the Widget Hidden Until Needed


This one was really interesting for me because hiding and exposing div tags with JavaScript and jQuery in HTML was new to me. This is starting to get way more complex and to do this example below you will need the sample JavaScript available from the EFT site which you can get when you sign up for the EFT. The JavaScipt in question though really doesn’t affect my technique of hiding div tags and presenting them though which is more to the point.


The web page screen shots below is of a single web page. I just use jQuery to help with finding and hiding or exposing different elements as needed. I start with a simple question of whether the user has the right equipment and present new div tags and hide the one just answered based on the response.


image


Finally I present the Join conference.


image


The user is presented with a prompt for a number.


image


Instead of launching the widget in a new window I just keep it in the same window.


image

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#WebVideoJoin").hide();
$("#videowidget").hide()
});

function hideButton(){
$("#No").click(function(){
$("#join").hide(1000);
$("#videowidget").hide();
alert("Please join via Phone");
});
};
function showButton(){
$("#Yes").click(function(){
$("#videowidget").hide();
$("#WebVideoQ").hide();
$("#WebVideoJoin").show();
$("#join").show();
});
};
</script>
<script type="text/javascript">
function removeWidget () {
var element = document.getElementById("videoWidgetFrame");
if (element) {
element.parentNode.removeChild(element);
}
}
function placeCall (extension) {
var extension = prompt("What is your Bridge Number?","");

while (isNaN(extension)){
var extension = prompt("Please use Numbers Only?","");}

$("#WebVideoJoin").hide();
$("#WebVideoQ").hide();
$("#videowidget").show();
var script = document.createElement('script');

script.type = 'text/javascript';
script.async = true;
script.src = "js/VideoWidget.js";

// Set params here:
window.videowidgetParams = {
callUrl: 'https://yourServer/call/' + extension,
onEvent: function (e) {
var status;

// Event will be 'CALLSTARTED' or 'CALLENDED'.
console.log("Received event: " + e.event);
if (e.event === 'CALLSTARTED') {
status = 'On a call ...';
} else if (e.event === 'CALLENDED') {
status = 'Call ended';
}
if (status) {
document.getElementById('statusbar').innerHTML = status;
}
},
// To disable warning on navigating away from an active call:
// disableUnloadWarning: true
};

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}
</script>

</head>
<div>
<div id="WebVideoQ" style="text-align: center; padding-bottom: 100px; padding-top: 100px;">

<h2>Do you have a computer microphone and speakers?</h2>
<br />
<button id="No" onclick="hideButton()">No</button>
<button id="Yes" onclick="showButton()">Yes</button>
<br />
</div>
<div id="WebVideoJoin" style="text-align: center; padding-bottom: 100px;">
<button id="join" onclick="removeWidget(); placeCall('3335');">Join
Conference</button>
</div>
<div id="videowidget" ></div>

Just remember in this example I have not shown you the external JavaScript that is driving the widget. That you will need to get from the EFT site. The important piece here is use of jQuery and exposing the widget by hiding and exposing different div tags.


Using Modal Overlay to Expose the Widget


We have all seen the cool websites that display pictures and videos in  modal overlay. Well you can also do that with the Jabber Guest widget. In my example I am using Boxer but there are other jQuery samples out there that do the same thing. This requires you to download some jQuery code and upload it to your webserver that is hosting your Jabber Guest website but its really not to hard to do.


This is a really simple example I would use to call into an IVR or other static number in your contact center. Basically this is just a hyperlink on  a webpage that when clicked launches the Boxer jQuery script that puts the widget in modal overlay. In my case I just launching into a video bridge but this is just a demo. In real life you are probably going to launch into a video IVR or contact center that has video-in-queue.


image


The widget launched using Boxer.


image

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="Boxerjs/jquery.fs.boxer.js"></script>
<link href="Boxerjs/jquery.fs.boxer.css" rel="stylesheet">

<script>
$(document).ready(function() {
$(".boxer").boxer();
});
</script>
</head>
<div>

<a href="https://yourServer/call/yourNumber@yourDomain.com?widget=true" class="boxer" data-boxer-height="500" data-boxer-width="700"><h1>Clickme-Demo Bridge Link</h1></a>

I had a lot of fun creating these demos. Most of the hard work in using Jabber Guest isn't in the server setup but more around how you want the widget presented to the user. Hopefully these few examples help get people thinking of more cool ways that the widget can be launched or used in a business process.


VoIPNorm

DevNet Hackathon At Cisco Live in May - Jabber Guest

To all you budding collaboration developers out there this will be one great event. If you can develop a website using HTML and JavaScript then you can certainly use Jabber Guest to help add collaboration to a website workflow.

Excerpt from the website:

We'll be pre-releasing the Jabber Guest APIs soon, and making them available in the DevNet zone at Cisco Live in May in San Francisco

Find out more about the DevNet zone at Cisco Live and register to attend for $49.

In the DevNet Hackathon at Cisco Live, you'll be able to get your hands on the APIs, work with them within a Sandbox environment, ask us questions, and develop whatever you can to show us at the end of the 24 hours, to hopefully blow the judges' minds!

https://developer.cisco.com/site/collaboration/jabber/guestsdk/hackathon/

If you need proof how easy it is to use Jabber Guest, well check the link below. If a hack like me can do it than any web designer can take advantage of Jabber Guest.

http://voipnorm.blogspot.com/p/blog-page.html

VoIPNorm

Understanding Jabber: Part 4 –Jabber Guest Brief Introduction

I was going to wait until the released version was available but I just couldn’t wait any longer. Because Jabber Guest is not FCS I am limited on the details so I will include a follow up post that goes a little deeper into the design and inner workings at a later date.

As a non-developer ( I have some basic HTML skills but they are not great) this is a super exciting area because of the ability of someone with like me to be able to add voice and video to a Web/Mobile application easily. Of course this works in well with WebRTC but as we all know WebRTC is hardly a perfect world today but it is improving. For more commentary on WebRTC I really like Dave Michels post on No Jitter. It has some great comments on where peoples expectations were and the reality of where we are today.

How is Jabber Guest different from other Jabber SDK’s?

With the more traditional Jabber SDK’s the user is a authenticated user within the Enterprise. With Jabber Guest the target is an anonymous user. So the user/guest accessing collaboration into your environment does not need an account. One of the best demo’s I have pout together so far is to have a video guest page that allows a user to enter the video bridge identifier and then have a web browser call into a enterprise video bridge environment. Cool stuff.

The guest has the potential to be able to access the following types of calls:

  • Point-to-point video
  • Point-to-many video (videoconference)
  • The ability to see themselves before going live on video
  • In-call control through a keypad
  • The ability to mute video, audio, or both
  • The ability to see themselves as well as your employee(s)
  • The choice of camera and audio device
  • The choice of clicking on your website from a tablet or PC or clicking on an app from a mobile device

Difference between Jabber SDK and Jabber Guest SDK

image 

 

I have listed as many publicly available resources for Jabber Guest as possible but as of right now the best way to learn more about Jabber Guest is to sign up for the Early Adopter Program. All the information I have in my post is publicly available.

Jabber Guest, yes there is a plugin……

As previously mentioned the wheels at the various standard bodies for what ever reason sometimes turn slower than everyone would like. So today while Jabber Guest does make use of some of the capabilities of WebRTC it still requires a plugin. In time this requirement will fade but today it is what it is. It’s a small plugin that takes only a few seconds to download and install.

Where can I get a demo of Jabber Guest?

I have setup  a simple demo’s of Jabber Guest on my blog:

http://voipnorm.blogspot.com/p/blog-page.html

Feel free to hit the call button. You will see the splash page of my personal bridge. This should help give a good idea of what the experience is like without going to over the top.The demo on my blog basically launches the Jabber Guest Widget in an iframe on the page your viewing. There are a number ways to launch the video sessions from a HTML point of view but the real beauty of Jabber Guest is the web designer need not know much about programing video or voice to include it in their site. The real work with including something like Jabber Guest in a site is really the work flow that you are trying to incorporate it into. I have built quite a few demo’s with Jabber Guest now where all the heavy lifting was really in the Javascript to control the workflow of the page not the fact that Jabber Guest was included on it.

Enjoy the demo.

References

Jabber Guest

http://www.cisco.com/en/US/prod/collateral/voicesw/ps6789/ps5745/ps13410/solution-overview-c22-729963.html

Jabber Guest On DevNet

https://developer.cisco.com/site/tech/communication-collaboration/jabber/overview.gsp#jabber_guest

https://developer.cisco.com/site/tech/communication-collaboration/jabber/overview.gsp#jabber_sdk_web_ios

Signup for the Early Adopter Program

https://communities.cisco.com/community/technology/collaboration/usergroups/collaboration/cug_trials

Jabber Guest video

https://www.youtube.com/watch?v=n-USuvpNC6c

VoIPNorm