amazon connect streams
2.16.0
Amazon Connect Streams API (Streams) ช่วยให้คุณสามารถรวมเว็บแอปพลิเคชันที่มีอยู่เข้ากับ Amazon Connect ได้ Streams ช่วยให้คุณสามารถฝัง Contact Control Panel (CCP) และ UI ของแอปโปรไฟล์ลูกค้าลงในเพจของคุณได้ นอกจากนี้ยังช่วยให้คุณสามารถจัดการเหตุการณ์ตัวแทนและสถานะการติดต่อได้โดยตรงผ่านอินเทอร์เฟซที่ขับเคลื่อนด้วยเหตุการณ์เชิงวัตถุ คุณสามารถใช้อินเทอร์เฟซในตัวหรือสร้างเองตั้งแต่ต้นก็ได้: Streams ให้ทางเลือกแก่คุณ
ไลบรารีนี้ต้องใช้ร่วมกับ amazon-connect-chatjs หรือ amazon-connect-taskjs เพื่อใช้ฟังก์ชัน Chat หรือ Task ของ Amazon Connect
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Amazon Connect และความสามารถของมัน โปรดดูคู่มือผู้ใช้ Amazon Connect
amazon-connect-streams หาได้จาก npmjs.com หากคุณต้องการดาวน์โหลดที่นี่ คุณสามารถใช้ไฟล์ใดไฟล์หนึ่งได้ เช่น release/connect-streams*
รัน npm run release เพื่อสร้างไฟล์รีลีสใหม่ คำแนะนำแบบเต็มสำหรับการสร้างภายในเครื่องด้วย npm มีอยู่ที่ด้านล่าง
ในเวอร์ชัน 1.x เรายังรองรับ make for Legacy อีกด้วย ตัวเลือกนี้ถูกลบออกในเวอร์ชัน 2.x
voiceConnection.muteParticipant()voiceConnection.unmuteParticipant()agent.mute()agent.unmute()voiceConnection.muteParticipant()voiceConnection.unmuteParticipant()agent.mute()agent.unmute()isSilentMonitor , isBarge , isSilentMonitorEnabled , isBargeEnabled , isUnderSupervision , updateMonitorParticipantState , getMonitorCapabilities , getMonitorStatus , isForcedMuteinitCCP หลายครั้งจะไม่เพิ่ม CCP ที่ฝังไว้หลายรายการต่อท้ายหน้าต่างอีกต่อไป และเฉพาะการเรียก initCCP ครั้งแรกเท่านั้นที่จะสำเร็จ โปรดทราบว่า Streams ไม่เคยรองรับกรณีการใช้งานของการเริ่มต้น CCP หลายรายการด้วย initCCP และการเปลี่ยนแปลงนี้ได้ถูกเพิ่มเพื่อป้องกันพฤติกรรมที่คาดเดาไม่ได้ที่เกิดขึ้นจากกรณีดังกล่าวagent.onContactPending ถูกลบออกแล้ว กรุณาใช้ contact.onPending แทน ตอนนี้ connect.onError แล้ว ก่อนหน้านี้ API นี้ใช้งานไม่ได้เลย โปรดทราบว่า หากคุณมีตรรกะของแอปพลิเคชันภายในฟังก์ชันนี้ ลักษณะการทำงานของฟังก์ชันจะเปลี่ยนไป ดูรายการใน document.md สำหรับรายละเอียดเพิ่มเติมagent.setState() เพื่อเปลี่ยนสถานะตัวแทน คุณจะต้องอัปเดตโค้ดของคุณเพื่อใช้คุณสมบัตินี้:enqueueNextState: true เพื่อทริกเกอร์ลักษณะการทำงานของสถานะถัดไปagent.setState() โปรดตรวจสอบให้แน่ใจด้วยว่าโค้ดของคุณใช้ contact.clear() และไม่ใช่ contact.complete() เมื่อทำการล้าง After Contact Work ออกจากผู้ติดต่อFailedConnectAgent , FailedConnectCustomer และ AfterCallWorkFailedConnectAgent -- ก่อนหน้านี้ เรากำหนดให้ตัวแทนคลิกปุ่ม "ล้างข้อมูลติดต่อ" เพื่อล้างสถานะนี้ เมื่อตัวแทนคลิกปุ่ม "ล้างข้อมูลติดต่อ" ลักษณะการทำงานก่อนหน้านี้จะทำให้ตัวแทนกลับสู่สถานะ Available โดยไม่ล้มเหลว ตอนนี้สถานะ FailedConnectAgent จะเป็น "ล้างอัตโนมัติ" เช่นเดียวกับ FailedConnectCustomer ที่เป็นมาโดยตลอดFailedConnectAgent และ FailedConnectCustomer -- ขณะนี้เรากำลังใช้ contact.clear() API เพื่อล้างสถานะเหล่านี้โดยอัตโนมัติ เป็นผลให้ตัวแทนจะกลับสู่สถานะตัวแทนที่มองเห็นได้ก่อนหน้านี้ (เช่น Available ) ก่อนหน้านี้ ตัวแทนจะถูกตั้งค่าเป็น Available เสมออันเป็นผลมาจากพฤติกรรม "การหักล้างอัตโนมัติ" นี้ โปรดทราบว่าแม้แต่ CCP แบบกำหนดเองก็ยังทำงานแตกต่างออกไปในการอัปเดตนี้สำหรับ FailedConnectAgent และ FailedConnectCustomerAfterCallWork -- เป็นส่วนหนึ่งของพฤติกรรม contact.clear() ใหม่ การคลิก "ล้างข้อมูลติดต่อ" ขณะที่อยู่ใน AfterCallWork จะทำให้ตัวแทนกลับสู่สถานะตัวแทนที่มองเห็นได้ก่อนหน้านี้ (เช่น Available ฯลฯ) โปรดทราบว่า CCP แบบกำหนดเองที่ใช้พฤติกรรม After Call Work ของตนเองจะไม่ได้รับผลกระทบจากการเปลี่ยนแปลงนี้contact.complete() ในเส้นทางที่เลิกใช้แล้ว ดังนั้นคุณควรเริ่มใช้ contact.clear() แทน หากคุณต้องการจำลองพฤติกรรม After Call Work ของ CCP ใน CCP ลูกค้าของคุณ ตรวจสอบให้แน่ใจว่าคุณใช้ contact.clear() เมื่อล้างข้อมูลการติดต่อด้วยเสียง หากคุณกำลังย้ายไปยัง CCP ใหม่ เราขอแนะนำให้คุณอัปเกรดที่เก็บนี้เป็นเวอร์ชันล่าสุด คุณควรอัปเกรดเป็น RTC-JS เวอร์ชันล่าสุดด้วยหากคุณใช้งานอยู่ หากต้องการคำแนะนำในการย้าย CCP ฉบับสมบูรณ์ และเพื่อทำความเข้าใจความแตกต่างอย่างถ่องแท้ถึงความแตกต่างเมื่อใช้ Streams กับ CCP ใหม่ โปรดดูโพสต์นี้: https://docs.aws.amazon.com/connect/latest/adminguide/upgrade-to -ล่าสุด-ccp.html
ขั้นตอนแรกในการใช้ Streams คืออนุญาตเพจที่คุณต้องการฝัง เพื่อความปลอดภัยของลูกค้า เรากำหนดให้โดเมนทั้งหมดที่ฝัง CCP สำหรับอินสแตนซ์ใดอินสแตนซ์หนึ่งต้องอยู่ในรายการที่อนุญาตอย่างชัดเจน แต่ละรายการโดเมนจะระบุโครงร่างโปรโตคอล โฮสต์ และพอร์ต หน้าใดๆ ที่โฮสต์อยู่หลังโครงร่างโปรโตคอล โฮสต์ และพอร์ตเดียวกันจะได้รับอนุญาตให้ฝังส่วนประกอบ CCP ซึ่งจำเป็นต่อการใช้ไลบรารี Streams
วิธีอนุญาตเพจของคุณ:
npm install amazon-connect-streams
import "amazon-connect-streams"; สิ่งนี้จะทำให้ตัวแปร connect พร้อมใช้งานในบริบทปัจจุบัน
amazon-connect-streams เข้ากันได้กับ TypeScript คุณจะต้องใช้เวอร์ชัน 3.0.1 หรือสูงกว่า:
import "amazon-connect-streams" ;
connect . core . initCCP ( { /* ... */ } ) ; ขั้นตอนถัดไปในการฝัง Connect ลงในแอปพลิเคชันของคุณคือการดาวน์โหลดไลบรารี Streams จาก GitHub คุณสามารถทำได้โดยการโคลนพื้นที่เก็บข้อมูลสาธารณะของเราที่นี่:
$ git clone https://github.com/aws/amazon-connect-streams
เมื่อคุณดาวน์โหลดสตรีมแล้ว ให้เปลี่ยนเป็นไดเร็กทอรีและสร้างมันขึ้นมา:
$ cd amazon-connect-streams
$ make
สิ่งนี้จะสร้างไฟล์ชื่อ connect-streams-${VERSION}.js ซึ่งเป็น Connect Streams API เต็มรูปแบบที่คุณต้องการรวมไว้ในเพจของคุณ คุณสามารถให้บริการ connect-streams-${VERSION}.js ด้วยเว็บแอปพลิเคชันของคุณ
ติดตั้ง NodeJS เวอร์ชัน LTS ล่าสุด
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
ค้นหาบิวด์อาร์ติแฟกต์ในไดเร็กทอรี Release - ซึ่งจะสร้างไฟล์ชื่อ connect-streams.js และเวอร์ชันย่อของ connect-streams-min.js เดียวกัน - นี่คือ Connect Streams API เต็มรูปแบบที่คุณต้องการรวมไว้ในเพจของคุณ
หากต้องการรันการทดสอบหน่วย:
$ npm run test-mocha
หมายเหตุ: การทดสอบเหล่านี้ทำงานบนไฟล์รีลีสที่สร้างขึ้นด้านบน
คุณจะต้องติดตั้ง gulp ด้วย คุณสามารถติดตั้ง gulp ได้ทั่วโลก
$ npm install -g gulp
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
ค้นหาบิวด์อาร์ติแฟกต์ในไดเร็กทอรี Release - ซึ่งจะสร้างไฟล์ชื่อ connect-streams.js และเวอร์ชันย่อของ connect-streams-min.js เดียวกัน - นี่คือ Connect Streams API เต็มรูปแบบที่คุณต้องการรวมไว้ในเพจของคุณ
หากต้องการรันการทดสอบหน่วย:
$ npm run gulp-test
หมายเหตุ: การทดสอบเหล่านี้ทำงานบนไฟล์รีลีสที่สร้างขึ้นด้านบน
Streams มี AWS-SDK เวอร์ชัน "อบใน" ในไฟล์ . ./src/aws-client.js ตรวจสอบให้แน่ใจว่าคุณนำเข้า Streams ก่อน AWS SDK เพื่อให้อ็อบเจ็กต์ AWS ที่เชื่อมโยงกับ Window เป็นอ็อบเจ็กต์จาก SDK ที่รวมไว้ด้วยตนเอง ไม่ใช่จาก Streams
การเริ่มต้น Streams API เป็นขั้นตอนแรกในการตรวจสอบว่าคุณได้ตั้งค่าทุกอย่างถูกต้องแล้ว และคุณจะสามารถรับฟังเหตุการณ์ได้
connect.core.initCCP() <!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " >
< script type =" text/javascript " src =" connect-streams-min.js " > </ script >
</ head >
<!-- Add the call to init() as an onload so it will only run once the page is loaded -->
< body onload =" init() " >
< div id =" container-div " style =" width: 400px; height: 800px; " > </ div >
< script type =" text/javascript " >
var containerDiv = document . getElementById ( "container-div" ) ;
var instanceURL = "https://my-instance-domain.my.connect.aws/ccp-v2/" ;
// initialize the streams api
function init ( ) {
// initialize the ccp
connect . core . initCCP ( containerDiv , {
ccpUrl : instanceURL , // REQUIRED
loginPopup : true , // optional, defaults to `true`
loginPopupAutoClose : true , // optional, defaults to `false`
loginOptions : { // optional, if provided opens login in new window
autoClose : true , // optional, defaults to `false`
height : 600 , // optional, defaults to 578
width : 400 , // optional, defaults to 433
top : 0 , // optional, defaults to 0
left : 0 // optional, defaults to 0
} ,
region : "eu-central-1" , // REQUIRED for `CHAT`, optional otherwise
softphone : { // optional, defaults below apply if not provided
allowFramedSoftphone : true , // optional, defaults to false
disableRingtone : false , // optional, defaults to false
ringtoneUrl : "[your-ringtone-filepath].mp3" , // optional, defaults to CCP’s default ringtone if a falsy value is set
allowFramedVideoCall : true , // optional, default to false
allowEarlyGum : true //optional, default to true
} ,
task : {
disableRingtone : false , // optional, defaults to false
ringtoneUrl : "[your-ringtone-filepath].mp3" // optional, defaults to CCP's default ringtone if a falsy value is set
} ,
pageOptions : { //optional
enableAudioDeviceSettings : false , //optional, defaults to 'false'
enableVideoDeviceSettings : false , //optional, defaults to 'false'
enablePhoneTypeSettings : true //optional, defaults to 'true'
} ,
shouldAddNamespaceToLogs : false , //optional, defaults to 'false'
ccpAckTimeout : 5000 , //optional, defaults to 3000 (ms)
ccpSynTimeout : 3000 , //optional, defaults to 1000 (ms)
ccpLoadTimeout : 10000 //optional, defaults to 5000 (ms)
} ) ;
}
</ script >
</ body >
</ html > ผสานรวมกับ Connect โดยการโหลด CCP ที่สร้างไว้ล่วงหน้าซึ่งอยู่ที่ ccpUrl ลงใน iframe และวางลงใน containerDiv ที่ให้ไว้ คำขอ API จะถูกส่งผ่าน CCP นี้ และการอัปเดตตัวแทนและผู้ติดต่อจะได้รับการเผยแพร่ผ่าน CCP และทำให้พร้อมใช้งานสำหรับโค้ดไคลเอ็นต์ JS ของคุณ
ccpUrl : URL ของ CCP นี่คือหน้าเว็บที่คุณมักจะนำทางไปเพื่อใช้ CCP ในหน้าสแตนด์อโลน ซึ่งจะแตกต่างกันไปในแต่ละอินสแตนซ์region : Amazon เชื่อมต่อภูมิภาคอินสแตนซ์ เช่น us-west-2 จำเป็นสำหรับช่องแชทเท่านั้นloginPopup : เป็นทางเลือก ค่าเริ่มต้นเป็น true ตั้งค่าเป็น false เพื่อปิดใช้งานป๊อปอัปการเข้าสู่ระบบloginOptions : ไม่บังคับ ใช้ได้เฉพาะเมื่อตั้งค่า loginPopup เป็น true เท่านั้น จัดเตรียมออบเจ็กต์ที่มีคุณสมบัติต่อไปนี้เพื่อเปิดป๊อปอัปล็อกอินในหน้าต่างใหม่แทนที่จะเป็นแท็บใหม่autoClose : ไม่บังคับ ค่าเริ่มต้นเป็น false ตั้งค่าเป็น true เพื่อปิดป๊อปอัปการเข้าสู่ระบบโดยอัตโนมัติหลังจากที่ผู้ใช้เข้าสู่ระบบheight : ช่วยให้คุณสามารถกำหนดความสูงของหน้าต่างป๊อปอัปเข้าสู่ระบบได้width : ช่วยให้คุณสามารถกำหนดความกว้างของหน้าต่างป๊อปอัปเข้าสู่ระบบได้top : สิ่งนี้ช่วยให้คุณกำหนดด้านบนของหน้าต่างป๊อปอัปเข้าสู่ระบบleft : สิ่งนี้ช่วยให้คุณกำหนดด้านซ้ายของหน้าต่างป๊อปอัปเข้าสู่ระบบloginPopupAutoClose : ทางเลือก ค่าเริ่มต้นเป็น false ตั้งค่าเป็น true ร่วมกับพารามิเตอร์ loginPopup เพื่อปิดหน้าต่างป๊อปอัปเข้าสู่ระบบโดยอัตโนมัติเมื่อขั้นตอนการรับรองความถูกต้องเสร็จสมบูรณ์ หากหน้าเข้าสู่ระบบเปิดในแท็บใหม่ พารามิเตอร์นี้จะปิดแท็บนั้นโดยอัตโนมัติด้วย นอกจากนี้ยังสามารถตั้งค่าได้ใน loginOptions หากใช้ตัวเลือกเหล่านั้นloginUrl : ไม่จำเป็น อนุญาตให้ใช้ URL ที่กำหนดเองเพื่อเริ่มต้น CCP เช่นในกรณีของการตรวจสอบสิทธิ์ SAMLsoftphone : ออบเจ็กต์นี้เป็นทางเลือกและอนุญาตให้คุณระบุการตั้งค่าบางอย่างที่เกี่ยวข้องกับคุณสมบัติซอฟต์โฟนของ ConnectallowFramedSoftphone : โดยปกติแล้ว ไมโครโฟนซอฟต์โฟนและลำโพงไม่ได้รับอนุญาตให้โฮสต์ใน iframe เนื่องจากซอฟต์โฟนต้องโฮสต์อยู่ในหน้าต่างหรือแท็บเดียว ต้องไม่ปิดหน้าต่างที่โฮสต์เซสชั่นซอฟต์โฟนระหว่างการโทรซอฟต์โฟน มิฉะนั้นการโทรจะถูกตัดการเชื่อมต่อ หาก allowFramedSoftphone เป็น true ส่วนประกอบซอฟต์โฟนจะได้รับอนุญาตให้โฮสต์ในหน้าต่างหรือแท็บนี้disableRingtone : ตัวเลือกนี้ช่วยให้คุณสามารถปิดการใช้งานเสียงริงโทนในตัวที่เล่นเมื่อมีสายเรียกเข้าได้อย่างสมบูรณ์ringtoneUrl : หากไม่ได้ปิดใช้งานเสียงเรียกเข้า จะทำให้สามารถแทนที่เสียงเรียกเข้าด้วยไฟล์เสียงที่รองรับเบราว์เซอร์ที่ผู้ใช้สามารถเข้าถึงได้ หากต้องการใช้เสียงเรียกเข้าเริ่มต้นแสดงความคิดเห็นในบรรทัดนี้pageOptions : ออบเจ็กต์นี้เป็นทางเลือกและอนุญาตให้คุณกำหนดค่าส่วนการกำหนดค่าที่จะแสดงในแท็บการตั้งค่าenableAudioDeviceSettings : หากเป็น true แท็บการตั้งค่าจะแสดงส่วนสำหรับการกำหนดค่าอุปกรณ์อินพุตและเอาต์พุตเสียงสำหรับเครื่องภายในของเอเจนต์ หากเป็น false หรือไม่ได้ระบุ pageOptions ตัวแทนจะไม่สามารถเปลี่ยนการตั้งค่าอุปกรณ์เสียงจากแท็บการตั้งค่าได้ จะไม่ปรากฏenableVideoDeviceSettings : หากเป็น true แท็บการตั้งค่าจะแสดงส่วนสำหรับการกำหนดค่าอุปกรณ์อินพุตวิดีโอสำหรับเครื่องภายในของเอเจนต์ หากเป็น false หรือไม่ได้ระบุ pageOptions ตัวแทนจะไม่สามารถเปลี่ยนการตั้งค่าอุปกรณ์วิดีโอจากแท็บการตั้งค่าได้ จะไม่ปรากฏenablePhoneTypeSettings : หากเป็น true หรือไม่ได้ระบุ pageOptions แท็บการตั้งค่าจะแสดงส่วนสำหรับกำหนดค่าประเภทโทรศัพท์และหมายเลขโทรศัพท์ตั้งโต๊ะของตัวแทน หากเป็น false ตัวแทนจะไม่สามารถเปลี่ยนประเภทโทรศัพท์หรือหมายเลขโทรศัพท์ตั้งโต๊ะจากแท็บการตั้งค่าได้shouldAddNamespaceToLogs : นำหน้า [CCP] กับบันทึกทั้งหมดที่ CCP บันทึกไว้ หมายเหตุสำคัญ: CCP มีบันทึกบางส่วนก่อนที่เนมสเปซจะถูกเติมไว้ข้างหน้าccpAckTimeout : การหมดเวลาเป็น ms ที่ระบุระยะเวลาที่สตรีมจะรอให้ CCP แบบ iframe ตอบสนองต่อการปล่อยเหตุการณ์ SYNCHRONIZE สิ่งเหล่านี้เกิดขึ้นอย่างต่อเนื่องตั้งแต่ครั้งแรกที่เรียก initCCP ควรปรากฏเฉพาะเมื่อมีปัญหาที่ต้องรีเฟรชหรือเข้าสู่ระบบใหม่เท่านั้นccpSynTimeout : การหมดเวลาเป็น ms ที่ระบุระยะเวลาที่สตรีมจะรอเพื่อส่งเหตุการณ์ SYNCHRONIZE ใหม่ไปยัง CCP แบบ iframe สิ่งเหล่านี้เกิดขึ้นอย่างต่อเนื่องตั้งแต่ครั้งแรกที่เรียก initCCPccpLoadTimeout : การหมดเวลาเป็น ms ที่ระบุระยะเวลาที่สตรีมจะรอเหตุการณ์ ACKNOWLEDGE เริ่มต้นจากผู้ปฏิบัติงานที่ใช้ร่วมกัน ในขณะที่ CCP ยังคงยืนหยัดอยู่ containerDiv Div ที่คุณวาง iframe ไว้ หรือใช้กฎ CSS เช่นนี้ # container-div iframe {
display : none;
}width: 100%; height: 100% . หากต้องการปรับแต่งขนาดของ CCP ให้ตั้งค่าความกว้างและความสูงขององค์ประกอบคอนเทนเนอร์ดูเอกสารฉบับเต็มที่นี่เพื่ออ่านเพิ่มเติมเกี่ยวกับการสมัครรับกิจกรรมและการดำเนินการเปลี่ยนแปลงสถานะทางโปรแกรม
