BrowserCall Widget

This tutorial describes how to create your own Browser Call widget with our Browser Call library. We will describe a simple widget with a Call and a Cancel button, but you can use this as a basis to create much more interesting widgets. Let’s assume we want to build a widget, and directly integrate it into a simple existing company page:

Simple HTML page

<!DOCTYPE html>
        <html>
        <head>
            <title>Welcome to MyCorp.org</title>
        </head>
        <body>
            <!-- ... Content of MyCorp.org website ... -->
        </body>
        </html>

At the beginning we should add all JavaScript and CSS files to this page <head> section. You can find example in the following zip file: widget

  • bootstrap.min.js and bootstrap.min.css – files from the Bootstrap CSS library. We will use them for the styling Call and Cancel buttons. (These files are optional).
  • jquery-2.2.0.js – jQuery library, which will be used for widget initialization. The tenios-jssip.js file also uses this library.
  • jssip.js – this is the JavaScript SIP library.
  • tenios-jssip.js – this is our SIP-client, which is based of the JsSIP library.
  • tenios-click2call-widget.js – this file contains the Browser Call widget implementation. We will use the TeniosC2CWidget object for the creation of the new widget.
JavaScript and CSS libraries
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://portal.tenios.com/portal/public/js/libs/jssip.js"></script>
<script src="https://portal.tenios.com/portal/public/js/libs/tenios-jssip.js">
</script><script src="https://portal.tenios.com/portal/public/js/libs/tenios-click2call-widget.js">
</script>

On the next step we create the HTML elements for our widget. We will use two button tags and two audio tags. The button tags are used for making a call and for hanging up. The audio tags are used for voice streaming. Let’s add the call-button CSS class to the Call button, and the cancel-button class to the Cancel button. The first audio tag gets the self-streaming class and the second one the remote-streaming class. These classes will be used later for the widget configuration.

Widget Body

<div>
    <button type="button" class="btn btn-primary call-button">Call</button>
    <button type="button" class="btn btn-danger cancel-button">Cancel</button>
    <audio autoplay="" hidden="true" class="self-streaming"></audio>
    <audio autoplay="" hidden="true" class="remote-streaming"></audio>
</div>

And finally we configure our widget via JavaScript (you can also put this into the <head> section of your page):

Widget Configuration

<script>
            $(document).ready(function() {
                TeniosC2CWidget.init({
                    position : 'library',
              //This property is fixed. Do not change it.
              widgetDomain: 'https://portal.tenios.com',
                    jsSipConfig : {
                        sipAccountUsername : 'click2call',
                        webRTCGatewayDomain : 'tevox.com',
                        wsServerUri : 'wss://rtc3.tenios.com:7443',
                        callerPassword : 'dacc4f703e30e9a6a934828d38969ce3',
                        destinationUsername : 5000,
                //Copy the webRtcSourceToken form the portal page
                        webRtcSourceToken : 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
                    },
                    callbacks : {
                        onAccepted : function(e) {
                            console.info("onAccepted")
                        },
                        onProgress : function(e) {
                            console.info("onProgress")
                        },
                        onFailed : function(e) {
                            console.info("onFailed")
                        },
                        onEnded : function(e) {
                            console.info("onEnded")
                        }
                    },
                    selfStreamElem : '.self-streaming',
                    remoteStreamElem : '.remote-streaming',
                    callButton : '.call-button',
                    cancelButton : '.cancel-button'
                });
            });
        </script>

 

  • First we insert the correct webRtcSourceToken (line 14). You can get this token on the Browser Call Routing page of the TENIOS portal.
  • Then we write some callback functions, which will be executed on different steps of the call. You can use these functions e.g. for showing user notifications for a different call stage:
    • onAccepted (line 17) – Fired when the call is accepted (2XX received/sent).
    • onProgress (line 20) – Fired when receiving or generating a 1XX SIP class response (>100) to the INVITE request
    • onFailed (line 23) – Fired when the session was unable to establish.
    • onEnded (line 26) – Fired when an established call ends.
  • After this we add our audio-streaming element to the widget (lines 30-31). Here we use the self-streaming and remote-streaming classes of the audio tags, which we created before.
  • And finally it is necessary to add references to the Call and Cancel buttons (lines 32-33), by specifying the call-button and cancel-button classes of our buttons.

As a result, you should see two buttons on the page, and be able to make a test call:

WEBRTC

If something didn’t work as expected, please verify that the source code of your entire HTML page looks something like this:

<!DOCTYPE html>
        <html>
        <head>
            <title>Welcome to MyCorp.org</title>
            <!-- Add JavaScript and CSS libraries. -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
            <script src="https://portal.tenios.com/portal/public/js/libs/jssip-0.7.13.js"></script>
            <script src="https://portal.tenios.com/portal/public/js/libs/tenios-jssip.js"></script>
            <script src="https://portal.tenios.com/portal/public/js/libs/tenios-click2call-widget.js"></script>
        
            <!-- Configure JavaScript object for our new Browser Call widget. -->
            <script>
                $(document).ready(function() {
                    TeniosC2CWidget.init({
                        duration : 200,
                        position : 'library',
                //This property is fixed. Do not change it.
                        widgetDomain: 'https://portal.tenios.com',
                        jsSipConfig : {
                            sipAccountUsername : 'click2call',
                            webRTCGatewayDomain : 'tevox.com',
                            wsServerUri : 'wss://rtc3.tenios.com:7443',
                            callerPassword : 'dacc4f703e30e9a6a934828d38969ce3',
                            destinationUsername : 5000,
                  //Copy the webRtcSourceToken form the portal page
                            webRtcSourceToken : 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
                        },
                        callbacks : {
                            onAccepted : function(e) {
                                console.info("cb onAccepted")
                            },
                            onProgress : function(e) {
                                console.info("cb onProgress")
                            },
                            onFailed : function(e) {
                                console.info("cb onFailed")
                            },
                            onEnded : function(e) {
                                console.info("cb onEnded")
                            }
                        },
                        selfStreamElem : '.self-streaming',
                        remoteStreamElem : '.remote-streaming',
                        callButton : '.call-button',
                        cancelButton : '.cancel-button'
                    });
                });
            </script>
        </head>
            <body>
                <!-- ... Content of MyCorp.org website ... -->
                <div>
                    <button type="button" class="btn btn-primary call-button">Call</button>
                    <button type="button" class="btn btn-danger cancel-button">Cancel</button>
                    <audio autoplay="" hidden="true" class="self-streaming"></audio>
                    <audio autoplay="" hidden="true" class="remote-streaming"></audio>
                </div>
            </body>
        </html>

 

TOP