Guest > Documents > Jabber Guest SDK for Web

About this Document

Title: Cisco Jabber Guest SDK for Web

Version: V10.6

Publisher: DevNet, Cisco's Developer Program

Publisher Address: Cisco Systems, Inc., 150 W Tasman Dr,
San Jose, CA 95134, USA

Comments: DevNet Slate is based upon the open source
project called Slate

Published Date: December 08, 2015

Introduction

The Cisco Jabber Guest SDK for Web is primarily a call widget that is embedded in an iframe within another web page. The other piece, which is optional, is a small amount of JavaScript code in the hosting page to handle optional communication between the page and the widget.

The recommended minimum size for the iframe is 448 x 322 pixels.

Embedding the Widget

<div>
    <iframe id="jabber" src="https://jabberc.mycompany.com/call/1000?widget=true">
    </iframe>  
</div>

Cisco Jabber Guest functionality is exposed on a web page by embedding the application widget. The widget is embedded by using an iframe element. An example of an embedded widget is shown in the right hand panel.

The example demonstrates the following information:

In the above code snippet, the widget is set up to call extension 1000, and to use the Cisco Jabber Guest server at jabberc.mycompany.com.

If a user starts a call and then navigates to a different page, either on the same site or on another site, the call will end. To prevent accidentally ending the call, the widget prompts the user to confirm that they want to leave the page. If the user confirms, the widget ends the call before leaving the page.

If you are not using a single page application, and if you need to allow customers to browse your site while on a call, embed the widget in a popup window.

Widget Sizing

A widget sizing tool is provided to determine the ideal dimensions for the widget container. This tool is located at:
https://<server>/call/widget-size.html

Events

The widget displays error messages and responds to events as required. To have the containing page change dynamically to reflect widget behavior, add an onmessage listener on the parent window.

Listening for Events

The code snippets in the right hand panel provide example event listening calls. 

var onmessageHandler,
    callEventHandler = function (eve) {
        var callEvent;
        // Test origin to make sure event is from widget
        // Failure to check the origin and possibly source properties enables cross-site scripting attacks.
        if (eve.origin === 'https://jabberguest.mycompany.com') {
            if (JSON) {
                if (typeof eve.data === 'string') {
                    callEvent = JSON.parse(eve.data);
                    console.log('Received ' + callEvent.event + ' from ' + eve.origin);
                    // PUT YOUR CUSTOM CODE HERE
                    // callEvent.event is the event: CALLSTARTED or CALLENDED
                }
            } else {
                console.log('Received event but no JSON parser is defined. Add &lt;!DOCTYPE html&gt; or include a third party JSON parsing library.');
            } 
        } else if (onmessageHandler) {
            // Pass event off to a previous message handler
            onmessageHandler(eve);
        }
    };

// For IE 8, use attachEvent
if (window.attachEvent) {
    window.attachEvent('onmessage', callEventHandler);
} else {
    // Save off any existing event handler and add our own
    onmessageHandler = window.onmessage;
    window.onmessage = callEventHandler;
    }

Event Reference

The widget sends one of two events to help you determine if a call is in progress or determine why a call ended.

Resource Description
CALLSTARTED Triggered when a call is started.
CALLENDED Triggered when a call ends.
JavaScript
JavaScript