Sử dụng Stringee Web Phone nhúng vào web của bạn để nghe gọi

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:

Đă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:

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

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

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

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

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

g. 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);
});

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

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

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

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

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

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

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

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

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

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

m. 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 điện năng đế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.