Guest > Learn > Web Tutorials

DevNet Learning Lab - Jabber Guest Web Client

Expected lab duration: 10 minutes

Lab Requirements

Jabber Guest - Embedded Browser Video Calling

Objective

Use the Jabber Guest API to embed consumer-to-business video calling directly into an existing live web site

Overview

Cisco Jabber Guest provides developers with the ability to easily embed live video calling directly into internet browser applications or mobile apps (iOS,) giving customers seamless, secure, high-quality access to your enterprise experts or call center inside the firewall. The Jabber Guest web client is implemented as an HTML/Javascript ‘widget’, which installs/launches a small plug-in and UI to handle audio/video calling. In this lab, we will modify an example company website to add a live Jabber-Guest click-to-video experience.

Step 1: Load the Southbeach Bank site for live-editing

Embedding the Jabber Guest widget into a web page requires only placing an HTML <iframe> element on the page with a src attribute containing the Jabber Guest URL - or simply opening a popup window with the URL. Let’s use Chrome’s ‘live-editing’ features to modify the ‘South Beach Bank’ web site:

  1. Right-click on the Southbeach Bank page link here: Southbeach Bank page and open the link in a new window or tab

  2. Right-click the ‘Chat Now!’ button and select ‘Inspect Element’, this will open the Chrome developer tools to the ‘Elements’ tab

  3. Right-click on the highlighted <input> HTML code block and select ‘Edit as HTML’, this will open the code edit window

Step 2: Place the Jabber Guest URL snippet into the site code

Jabber Guest client URL

window.open('https://jabberguestsandbox.cisco.com/call/5555','popup','width=550,height=400,toolbar=no,location=no,menubar=no,status=no'); return false

Now, let’s modify the onclick attribute of the <input> element so that the ‘Chat Now!’ button opens a Jabber Guest voice and video session popup window:

  1. Use the keyboard/mouse to ‘copy’ the Jabber Guest URL configured for access to the DevNet Sandbox Jabber Guest server (see the code example area to the right)

  2. ‘Paste’ the code into the edit window, exactly between the two double-quotes following the onclick attribute: onclick="<paste-code-here>" Don’t overlook the trailing ; return false section of the code

  3. Left-click anywhere outside the code edit window to save the changes. You can close the Developer Tools window.

Step 3 Check your work!

Now that we have made our modifications to the page, we can launch a Jabber Guest voice and video call

  1. Click the ‘Chat Now!’ button

  2. The Jabber Guest widget will be launched in a popup window, and the video session will begin

  3. View the video

What’s next? Thanks for exploring the Jabber Guest Web Client! To learn more about Jabber Guest, including embedding functionality within iOS mobile apps, and managing Jabber Guest routing with the Jabber Guest Server API, please visit the Jabber Guest Dev Center: link needed

Examples