Use embedded Stringee Web Phone on your website to make and take calls

Published 2019-08-02

Stringee Web Phone is built 100% based on Stringee JavaScript SDK (https://developer.stringee.com/download#contentSdkWebsite) equipped with user interface, which means it can be easily embedded into your website:

Stringee Web Phone

Demo 1 (Make/take calls without opening Popup): https://demo.stringee.com/stringee-web-phone/web1.html

Demo 2 (Make/take calls with Popup): https://demo.stringee.com/stringee-web-phone/web2_open_popup.html

Stringee Web Phone Source Code is available here

Source code for above demos here

1. Embed Stringee Web Phone into your Website

To embed into your website, put the following script right after the body element

<script src="https://static.stringee.com/web_phone/lastest/js/StringeeSoftPhone-lastest.js"></script>
<script>
    var config = {
        showMode: 'full',//full | min | none
        top: 45,
        left: 50,
        //right: 810,

        arrowLeft: 155,
        arrowDisplay: 'top',//top | bottom | none

        //list your Stringee Number
        fromNumbers: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}]
    };
    StringeeSoftPhone.init(config);

    var access_token2 = 'YOUR_ACCESS_TOKEN';

    StringeeSoftPhone.on('displayModeChange', function (event) {
        console.log('displayModeChange', event);
        if (event === 'min') {
            StringeeSoftPhone.config({arrowLeft: 75});
        } else if (event === 'full') {
            StringeeSoftPhone.config({arrowLeft: 155});
        }
    });

    StringeeSoftPhone.on('requestNewToken', function () {
        console.log('requestNewToken+++++++');
        StringeeSoftPhone.connect(access_token2);
    });

    StringeeSoftPhone.connect(access_token2);
</script>

the variables in the configuration are listed below:

Field Type Require Default Description
showMode String NO full Display mode:
'full': full size
'min': small
'none': hidden
top Int NO undefined Similar to 'top' from CSS
left Int NO undefined Similar to 'left' from CSS
right Int NO undefined Similar to 'right' from CSS
bottom Int NO undefined Similar to 'bottom' from CSS
arrowDisplay String NO top Arrow position:
'top': above
'bottom': below
'none': hidden
arrowLeft Int NO 20 Arrow distance from left border
fromNumbers Array NO [] Array of numbers from, VD: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}]
askCallTypeWhenMakeCall Boolean NO false false=doesn’t ask for call type when user call, default as “callout”'; true=ask user to define call type
appendToElement String NO null null: iframe is appended before element; if different from null, iframe is embedded into element with ID as this value.
makeAndReceiveCallInNewPopupWindow Boolean NO false If this is set=true, when user press “pick-up” or “call”, Softphone will not execute but only show 'answerIncomingCallBtnClick' and 'makeOutgoingCallBtnClick', you have to execute one of these and open a new popup window to make/take calls from.

2. Change settings anytime

Let’s config(params) function with variable be the new setting, E.g:

StringeeSoftPhone.config({arrowLeft: 155});

Or hiding iframe:

StringeeSoftPhone.config({showMode: 'none'});

3. Make, take or disconnect call from your outside code.

Make call:

StringeeSoftPhone.makeCall(FROM_NUMBER, TO_NUMBER, function (res) {
    console.log('res: ', res);
});

Disconnect Call:

StringeeSoftPhone.hangupCall();

Take call:

StringeeSoftPhone.answerCall();

4. Connect and disconnect from StringeeServer

Connect:

StringeeSoftPhone.connect(access_token2);

Disconnect:

StringeeSoftPhone.disconnect();

5. Events

a. Change of display mode

StringeeSoftPhone.on('displayModeChange', function (event) {
    console.log('displayModeChange', event);
    if (event === 'min') {
        StringeeSoftPhone.config({arrowLeft: 75});
    } else if (event === 'full') {
        StringeeSoftPhone.config({arrowLeft: 155});
    }
});

b. Access token expired, request new Access token

StringeeSoftPhone.on('requestNewToken', function () {
    console.log('requestNewToken+++++++');
    StringeeSoftPhone.connect(access_token2);
});

c. Events happen before makeCall

You can change some information about the call before makeCall

StringeeSoftPhone.on('beforeMakeCall', function (call, callType) {
    console.log('beforeMakeCall: ' + callType);
    return true;
});

d. Video call

To make a video call, you need 2 following events and tag streams into respective video element

StringeeSoftPhone.on('addlocalstream', function (stream) {
    //console.log('addlocalstream: ', stream);
    localVideo.srcObject = null;
    localVideo.srcObject = stream;
});
StringeeSoftPhone.on('addremotestream', function (stream) {
    //console.log('addremotestream: ', stream);
    remoteVideo.srcObject = null;
    remoteVideo.srcObject = stream;
});

e. Complete authentication

StringeeSoftPhone.on('authen', function (res) {
    console.log('authen: ', res);
});

e. Disconnection

StringeeSoftPhone.on('disconnect', function () {
    console.log('disconnected');
});

f. Status of call signal

StringeeSoftPhone.on('signalingstate', function (state) {
    console.log('signalingstate', state);
});

g. Call button clicked event

StringeeSoftPhone.on('makeOutgoingCallBtnClick', function (fromNumber, toNumber, callType) {
    console.log('makeOutgoingCallBtnClick: fromNumber=' + fromNumber + ', toNumber=' + toNumber + ',callType=' + callType);
});

h. Pick-up button clicked event

StringeeSoftPhone.on('answerIncomingCallBtnClick', function () {
    console.log('answerIncomingCallBtnClick');
});

i. Incoming call event

StringeeSoftPhone.on('incomingCall', function (incomingcall) {
    console.log('incomingCall: ', incomingcall);
});

j. Hangup button clicked event

StringeeSoftPhone.on('endCallBtnClick', function () {
    console.log('endCallBtnClick');
});

k. Hidden “call” screen event

StringeeSoftPhone.on('callingScreenHide', function () {
    console.log('callingScreenHide');
});

l. Incoming call rejection event

StringeeSoftPhone.on('declineIncomingCallBtnClick', function () {
    console.log('declineIncomingCallBtnClick');
});

m. Hidden Incoming call event

StringeeSoftPhone.on('incomingScreenHide', function () {
    console.log('incomingScreenHide');
});