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

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:

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:

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');
});