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

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

Field

Type

Require

Default

Description

showMode String NO full Chế độ hiển thị: 'full': đầy đủ 'min': nhỏ 'none': ẩn top Int NO undefined Tương tự 'top' của CSS left Int NO undefined Tương tự 'left' của CSS right Int NO undefined Tương tự 'right' của CSS bottom Int NO undefined Tương tự 'bottom' của CSS arrowDisplay String NO top Vị trí của Arrow: 'top': bên trên 'bottom': bên dưới 'none': ẩn arrowLeft Int NO 20 Arrow cách mép trái fromNumbers Array NO [] Mảng các số from, VD: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}] askCallTypeWhenMakeCall Boolean NO false false=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 appendToElement String NO null null: 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 makeAndReceiveCallInNewPopupWindow Boolean NO false Khi 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 đó enableVideoCall Boolean NO false Khi 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 iframeVideoCallSize Object NO {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.