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

Stringee Web Phone

Register Stringee API account HERE

Demo 1 (listen/call without opening a new Popup): https://demo.stringee.com/stringee-web-phone/web1.html

Demo 2 (listen/call to open a new Popup): https://demo.stringee.com/stringee-web-phone/web2_open_popup.html

Stringee Web Phone source code is provided here

The ource code for the above 2 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/stringeex/web_phone/latest/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:

FieldTypeRequireDefaultDescription
showModeStringNOfullDisplay mode: 
'full': full size
'min': small
'none': hidden
topIntNOundefinedSimilar to 'top' from CSS
leftIntNOundefinedSimilar to 'left' from CSS
rightIntNOundefinedSimilar to 'right' from CSS
bottomIntNOundefinedSimilar to 'bottom' from CSS

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 a 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. The access token expired, request a 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 a 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 the 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. The pick-up button clicked the 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');
});

 

Stringee API provides features such as phone calls, video calling, instant messaging, SMS, or customer service hotline that can be quickly embedded directly into business applications/websites. It helps save up to 80% of time and costs for businesses. Developing these features yourself could take 1 - 3 years.