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:

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/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 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.