背景
公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑。
Amazon Connect后台
需要在后台创建“联系流”,也就是用户接通电话后我们提供的一系列功能选项,比如开始放一段欢迎语音,然后提示用户选择1,2,4,*,#等,每一个选项可能又对应了一条“联系流”,整体的功能就是围绕着“联系流”来进行的,用户输入的一些值可以通过 contact.getAttributes() 拿到。
前端对接
需要引入 amazon-connect-1.3.js, 这是一个开源项目(https://github.com/aws/amazon-connect-streams)所有前端接打电话的界面功能都是基于这个库来完成的。
connect.contact(): 主要获取联系人信息(姓名,电话等)还有联系人输入的一些值。
connect.agent(): 主要获取电话设备的一些状态信息。
HTML:
1 <!-- 电话图标,用来唤出电话界面 --> 2 <div id="amazonConnectContainer"> 3 <img src="/Public/img/amazon_tel.jpg" alt=""> 4 </div> 5 <!-- 生成iframe的地方,可以放在网页任意位置 --> 6 <div id="containerDiv" title="Amazon Connect"> 7 <!--Amazon CCP is hiding in here--> 8 </div>
CSS:
1 <style> 2 .containerDiv iframe { 3 display: none; 4 } 5 </style>
JS:
1 <script type="text/javascript" src="/Public/lib/connect-streams.js"></script> 2 <script type="text/javascript"> 3 $(document).ready(function() { 4 $("#amazonConnectContainer").click(function(event) { 5 event.preventDefault(); 6 $("#containerDiv iframe").remove(); 7 if(typeof connect != "undefined" && !connect.core.initialized){ 8 window.myCPP = window.myCPP || {}; 9 //replace with the CCP URL for your Amazon Connect instance 10 var ccpUrl = "https://xxxxxx.awsapps.com/connect/ccp#/"; 11 connect.core.initCCP(containerDiv, { 12 ccpUrl: ccpUrl, 13 loginPopup: false, 14 softphone: { 15 allowFramedSoftphone: true, 16 disableRingtone: true, 17 ringtoneUrl: true 18 } 19 }); 20 connect.contact(subscribeToContactEvents); 21 connect.agent(subscribeToAgentEvents); 22 } 23 var awidth = 320; //窗口宽度 24 var aheight = 465; //窗口高度 25 var atop = (screen.availHeight - aheight) / 2; //窗口顶部位置 26 var aleft = (screen.availWidth - awidth) / 2; //窗口放中央 27 28 window.open (ccpUrl, 'newwindow', 'height=465, width=320, top='+atop+', left='+aleft+', toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 29 }); 30 31 function subscribeToContactEvents(contact){ 32 window.myCPP.contact = contact; 33 logInfoMsg("Subscribing to events for contact"); 34 if (contact.getActiveInitialConnection() 35 && contact.getActiveInitialConnection().getEndpoint()) { 36 logInfoMsg("New contact is from " + contact.getActiveInitialConnection().getEndpoint().phoneNumber); // 用户电话 37 } else { 38 logInfoMsg("This is an existing contact for this agent"); 39 } 40 logInfoMsg("Contact is from queue " + contact.getQueue().name); 41 logInfoMsg("Contact attributes are " + JSON.stringify(contact.getAttributes())); // 用户属性 42 } 43 function subscribeToAgentEvents(agent) { 44 window.myCPP.agent = agent; 45 agentGreetingDiv.innerHTML = '<h3>Hi ' + agent.getName() + '!</h3>'; 46 logInfoMsg("Subscribing to events for agent " + agent.getName()); 47 logInfoMsg("Agent is currently in status of " + agent.getStatus().name); 48 // 获取电话状态名称 49 displayAgentStatus(agent.getStatus().name); 50 // agent.onRefresh(handleAgentRefresh); 51 // agent.onRoutable(handleAgentRoutable); 52 // agent.onNotRoutable(handleAgentNotRoutable); 53 // agent.onOffline(handleAgentOffline); 54 } 55 function logInfoMsg(msg) { 56 connect.getLog().info(msg); 57 } 58 }); 59 </script>