Stringee Web Phone được xây dựng 100% dựa trên Stringee JavaScript SDK với đầy đủ giao diện để bạn có thể nhúng nhanh chóng vào Web của mình:

Stringee Web Phone

Đăng ký tài khoản Stringee API TẠI ĐÂY

Demo 1 (nghe/gọi không mở Popup mới): https://demo.stringee.com/stringee-web-phone/web1.html

Demo 2 (nghe/gọi mở Popup mới): https://demo.stringee.com/stringee-web-phone/web2_open_popup.html

Mã nguồn Stringee Web Phone được chúng tôi cung cấp tại đây

Mã nguồn 2 demo trên tại đây

1. Nhúng Stringee Web Phone vào Website của bạn

Để nhúng vào web của bạn thì đặt đoạn script sau vào ngay sau thẻ body

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

trong đó config có các tham số sau:

Field

Type

Require

Default

Description

showModeStringNOfullChế độ hiển thị: 
'full': đầy đủ
'min': nhỏ
'none': ẩn
topIntNOundefinedTương tự 'top' của CSS
leftIntNOundefinedTương tự 'left' của CSS
rightIntNOundefinedTương tự 'right' của CSS
bottomIntNOundefinedTương tự 'bottom' của CSS
arrowDisplayStringNOtopVị trí của Arrow: 
'top': bên trên
'bottom': bên dưới
'none': ẩn
arrowLeftIntNO20Arrow cách mép trái
fromNumbersArrayNO[]Mảng các số from, VD: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}]
askCallTypeWhenMakeCallBooleanNOfalsefalse=không hỏi kiểu cuộc gọi là gì khi User nhấn Call, mặc định là kiểu 'callout'; true=hỏi người dùng kiểu call là gì khi nhấn Call
appendToElementStringNOnullnull: iframe được append vào trước thẻ ; nếu khác null thì iframe được nhúng vào element có ID bằng giá trị này
makeAndReceiveCallInNewPopupWindowBooleanNOfalseKhi trường này được set=true thì khi người dùng bấm nút 'Nghe máy' hoặc nút 'Gọi', Softphone sẽ không xử lý tiếp mà chỉ gọi ra các sự kiện 'answerIncomingCallBtnClick' và 'makeOutgoingCallBtnClick', bạn phải thực hiện 2 sự kiện này và mở ra 1 popup window để nghe/gọi trên đó
enableVideoCallBooleanNOfalseKhi trường này được set=true thì webphone sẽ hiển thị được video call khi có khách hàng gọi dạng video đến
iframeVideoCallSizeObjectNO{width: 550, height: 670}Khi cấu hình trường này sẽ thay đổi kích thước iframe của webphone khi nhận được cuộc gọi video call

2. Thay đổi cấu hình bất cứ lúc nào

Gọi hàm config(params) với tham số là cấu hình mới, VD:

StringeeSoftPhone.config({arrowLeft: 155});

hay để ẩn iframe:

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

3. Tạo cuộc gọi đi, ngắt cuộc gọi, nghe máy cuộc gọi đến từ code bên ngoài của bạn

Tạo cuộc gọi:

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

Ngắt cuộc gọi:

StringeeSoftPhone.hangupCall();

Nghe máy cuộc gọi đến:

StringeeSoftPhone.answerCall();

4. Kết nối và ngắt kết nối với StringeeServer

Kết nối:

StringeeSoftPhone.connect(access_token2);

Ngắt kết nối:

StringeeSoftPhone.disconnect();

5. Các sự kiện

a. Chế độ hiển thị thay đổi

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 hết hạn, yêu cầu cấp access token mới

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

c. Sự kiện xảy ra ngay trước khi makeCall

Bạn có thể thay đổi 1 số thông tin về call trước khi makeCall

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

d. Video call

Để gọi video, cần có 2 sự kiện sau và gán các stream vào các thẻ video tương ứng

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. Hoàn thành việc xác thực

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

f. Bị ngắt kết nối

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

g. Trạng thái về kết nối của cuộc gọi

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

h. Sự kiện nút gọi được click

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

i. Sự kiện nút nghe máy được click

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

k. Sự kiện có cuộc gọi đến

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

l. Sự kiện nút ngắt máy được click

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

m. Sự kiện màn hình "call" ẩn

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

n. Sự kiện từ chối nghe cuộc gọi đến

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

o. Sự kiện màn hình cuộc gọi đến ẩn

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

Tạm Kết

Stringee API cung cấp các tính năng như gọi điện thoại, gọi video, tin nhắn trò chuyện, SMS hay tổng đài chăm sóc khách hàng (CSKH) có thể được nhúng trực tiếp vào các ứng dụng/trang web của doanh nghiệp một cách nhanh chóng. Điều này giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp, nếu tự phát triển các tính năng này có thể mất từ ​​1 - 3 năm.