Pages

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.

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.

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.

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.

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.

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.

Finally I present the Join conference.

The user is presented with a prompt for a number.

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

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.

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.

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

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!

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

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.

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.

Join Node-Flint Support

Email Subscription

Subscribe To VoIPNorm

Followers

Disclaimer

This is my personal weblog. The opinions expressed in this blog are my own views and not those of Cisco. And yes from time to time my opinion can change.

All information provided on this site is for informational purposes only. VoIPNorm (Chris Norman) makes no representitive as to accuracy, completeness, currentness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delay in this information or any losses, injuries, or damages arising from its use. All information is provided on an as-is basis.