Lab 3: 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 and mobile apps (Android/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 exercise, 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. Click on the Southbeach Bank page link here: Southbeach Bank page to open the site in a new browser 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