背景

公司为提高客服部门沟通效率对接电话呼叫中心，调研后选择了亚马逊的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 <divid="amazonConnectContainer">
3     <imgsrc="/Public/img/amazon_tel.jpg"alt="">
4 </div>
5 <!--生成iframe的地方，可以放在网页任意位置-->
6 <divid="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 <scripttype="text/javascript"src="/Public/lib/connect-streams.js"></script>
2 <scripttype="text/javascript">
3 $(document).ready(function() {4 $("#amazonConnectContainer").click(function(event) {5 event.preventDefault();6 $("#containerDiv iframe").remove();7             if(typeofconnect!= "undefined" && !connect.core.initialized){8 window.myCPP=window.myCPP||{};9                 //replace with the CCP URL for your Amazon Connect instance
10                 varccpUrl= "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             varawidth= 320;//窗口宽度
24             varaheight= 465;//窗口高度
25             varatop=(screen.availHeight-aheight)/ 2;//窗口顶部位置
26             varaleft=(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         functionsubscribeToContactEvents(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         functionsubscribeToAgentEvents(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         functionlogInfoMsg(msg) {56 connect.getLog().info(msg);57 }58 });59 </script>