Stringee Web Phone ถูกสร้างขึ้น 100% บนพื้นฐานของ Stringee JavaScript SDK (https://developer.stringee.com/download#contentSdkWebsite) และมาพร้อมกับอินเตอร์เฟซผู้ใช้ ซึ่งหมายความว่าสามารถฝังเข้ากับเว็บไซต์ของคุณได้อย่างง่ายดาย:

ลงทะเบียนบัญชี Stringee API ที่นี่

Demo 1 (ฟัง/โทรโดยไม่ต้องเปิด Popup ใหม่): https://demo.stringee.com/stringee-web-phone/web1.html
Demo 2 (ฟัง/โทรเพื่อเปิด Popup ใหม่): https://demo.stringee.com/stringee-web-phone/web2_open_popup.html
รหัสซอร์สของ Stringee Web Phone ได้รับการให้ที่นี่
รหัสซอร์สสำหรับ Demo ทั้ง 2 ตัวข้างต้นที่นี่

1. ฝัง Stringee Web Phone เข้ากับเว็บไซต์ของคุณ

เพื่อฝังเข้ากับเว็บไซต์ของคุณ ให้วางสคริปต์ต่อไปนี้หลังจากองค์ประกอบ 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>

ตัวแปรในการตั้งค่าคอนฟิกมีรายการดังนี้:

2. เปลี่ยนการตั้งค่าได้ทุกเวลา

ให้ฟังก์ชัน config(params) พร้อมตัวแปรเป็นการตั้งค่าใหม่, เช่น:

StringeeSoftPhone.config({arrowLeft: 155});

หรือซ่อน iframe:

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

3. ทำการโทร, รับ, หรือวางสายจากโค้ดภายนอกของคุณ

ทำการโทร:

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

วางสาย:

StringeeSoftPhone.hangupCall();

รับสาย:

StringeeSoftPhone.answerCall();

4. เชื่อมต่อและตัดการเชื่อมต่อจาก StringeeServe

เชื่อมต่อ:

StringeeSoftPhone.connect(access_token2);

ตัดการเชื่อมต่อ:

StringeeSoftPhone.disconnect();

5. เหตุการณ์

a. เปลี่ยนโหมดการแสดงผล

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. โทเค็นการเข้าถึงหมดอายุ ขอโทเค็นการเข้าถึงใหม่

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

c. เหตุการณ์ที่เกิดขึ้นก่อนทำการโทร

คุณสามารถเปลี่ยนแปลงข้อมูลบางอย่างเกี่ยวกับการโทรก่อนทำการโทร

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

d. การโทรวิดีโอ

เพื่อทำการโทรวิดีโอ คุณต้องการ 2 เหตุการณ์ต่อไปนี้และแท็กสตรีมเข้ากับองค์ประกอบวิดีโอที่สอดคล้องกัน

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. การตรวจสอบสิทธิ์เสร็จสมบูรณ์

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

f. การตัดการเชื่อมต่อ

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

g. สถานะของสัญญาณการโทร

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

h. เหตุการณ์ที่ปุ่มโทรถูกคลิก

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

i. เหตุการณ์ที่ปุ่มรับสายถูกคลิก

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

k. เหตุการณ์การโทรเข้า

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

j. เหตุการณ์คลิกปุ่มวางสาย

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

l. เหตุการณ์หน้าจอ "โทร" ถูกซ่อน 

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

m. เหตุการณ์การปฏิเสธการโทรเข้า

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

n. เหตุการณ์การโทรเข้าที่ถูกซ่อน

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

Stringee API ให้บริการฟีเจอร์ต่างๆ เช่น การโทรศัพท์, การโทรวิดีโอ, การส่งข้อความทันที, SMS, หรือสายด่วนบริการลูกค้า ที่สามารถฝังเข้าได้โดยตรงกับแอปพลิเคชัน/เว็บไซต์ทางธุรกิจได้อย่างรวดเร็ว ช่วยประหยัดเวลาและค่าใช้จ่ายให้กับธุรกิจได้ถึง 80% การพัฒนาฟีเจอร์เหล่านี้ด้วยตัวเองอาจใช้เวลา 1 - 3 ปี