This site is no longer being maintained. Latest documents are available at Cisco Jabber Guest. Also, we recommend migrating to the Webex App.

Guest > Documents > Jabber Guest SDK for Web

    • V10.6
    • Copyright © 2015 by Cisco Systems, Inc.
    • All Rights Reserved.
    • Published December 08, 2015
    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:

    • Extension number
    • Server location

    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