background

In order to improve the communication efficiency of customer service department, the company chose Amazon Connect service of Amazon after investigation, because Alibaba cloud was not selected for foreign business, so there was a hole.

Amazon Connect background

We need to create "contact flow" in the background, that is, a series of function options provided by us after the user connects the phone, such as starting to put a welcome voice, and then prompting the user to select 1, 2, 4, *, ා, etc., each option may correspond to a "contact flow", the overall function is around the "contact flow", and some values entered by the user can be through cont Act. Getattributes().

Front end docking

amazon-connect-1.3.js needs to be introduced. This is an open source project (https://github.com/aws/amazon-connect-streams). All the front-end call and receive interface functions are based on this library.

connect.contact(): mainly obtain contact information (name, phone number, etc.) and some values entered by the contact.
connect.agent(): mainly obtain some status information of the telephone device.

HTML:

1 <! -- phone icon, used to call out the phone interface -- >
2 <div id="amazonConnectContainer">
3     <img src="/Public/img/amazon_tel.jpg" alt="">
4 </div>
5 <! -- where iframe is generated, it can be placed anywhere on the web page -- >
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; //Window width
24             var aheight = 465; //Window height
25             var atop = (screen.availHeight - aheight) / 2; //Window top position
26             var aleft = (screen.availWidth - awidth) / 2; //Center window
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); // Subscriber phone
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())); // user attribute
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             // Get phone status name
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>