亞馬遜 amazon connect（呼叫中心）

背景

公司為提高客服部門溝通效率對接電話呼叫中心，調研後選擇了亞馬遜的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>