-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
225 lines (202 loc) · 8.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<body>
<div id="topDiv" style="width: 700px; min-width: 700px; margin-left: 200px;">
<div id="myApp">
<h1>Amazon Connect Streams API Samples<h1>
<h2>Subscribing to Streams Events</h2>
</div>
</div>
<div id="gridDiv" style="display: grid; grid-template-columns: 350px 400px 400px">
<div id="containerDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px; display: none;">
<!--Amazon CCP is hiding in here-->
</div>
<div id="customCCPDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px; border-style: dotted; border-color: gray; border-width: thick;">
<!-- custom user experience goes here -->
<div id="statusDiv">
<div id="agentGreetingDiv" style="padding: 5px;">
<!-- say hi to the agent -->
</div>
<div id="agentStatusDiv" style="padding: 5px;">
</div>
<div id="goAvailableDiv" style="background-color: green; padding: 10px; margin: 10px 60px 10px 60px">
<span onclick="goAvailable()">Go Available</span><br />
</div>
<div id="goOfflineDiv" style="background-color: gray; padding: 10px; margin: 10px 60px 10px 60px">
<span onclick="goOffline()">Go Offline</span><br />
</div>
</div>
<div id="contactActionsDiv">
<div id="answerDiv" style="border-style: solid; border-color: black; border-width: medium; padding: 10px; margin: 10px 60px 10px 60px">
<span onclick="acceptContact()">Answer Incoming</span><br />
</div>
<div id="hangupDiv" style="border-style: solid; border-color: black; border-width: medium; padding: 10px; margin: 10px 60px 10px 60px">
<span onclick="disconnectContact()">Hang-Up</span><br />
</div>
</div>
</div>
<div id="logMsgsContainer">
<h2>Log Messages</h2>
<div id="logMsgs" style="height: 465px; overflow: auto;">
<!-- log messages will go here -->
</div>
</div>
<div id="eventMsgsContainer">
<h2>Event Messages</h2>
<div id="eventMsgs" style="height: 465px; overflow: auto;">
<!-- events from Streams API will go here-->
</div>
</div>
</div>
</body>
</html>
<script src="amazon-connect-v1.2.0.js"></script>
<script type="text/javascript">
window.myCPP = window.myCPP || {};
//replace with the CCP URL for your Amazon Connect instance
var ccpUrl = "your_ccp_url";
connect.core.initCCP(containerDiv, {
ccpUrl: ccpUrl,
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
connect.contact(subscribeToContactEvents);
connect.agent(subscribeToAgentEvents);
function subscribeToContactEvents(contact) {
window.myCPP.contact = contact;
logInfoMsg("Subscribing to events for contact");
if (contact.getActiveInitialConnection()
&& contact.getActiveInitialConnection().getEndpoint()) {
logInfoMsg("New contact is from " + contact.getActiveInitialConnection().getEndpoint().phoneNumber);
} else {
logInfoMsg("This is an existing contact for this agent");
}
logInfoMsg("Contact is from queue " + contact.getQueue().name);
logInfoMsg("Contact attributes are " + JSON.stringify(contact.getAttributes()));
contact.onIncoming(handleContactIncoming);
contact.onAccepted(handleContactAccepted);
contact.onConnected(handleContactConnected);
contact.onEnded(handleContactEnded);
}
function handleContactIncoming(contact) {
if (contact) {
logInfoEvent("[contact.onIncoming] Contact is incoming. Contact state is " + contact.getStatus().type);
} else {
logInfoEvent("[contact.onIncoming] Contact is incoming. Null contact passed to event handler");
}
}
function handleContactAccepted(contact) {
if (contact) {
logInfoEvent("[contact.onAccepted] Contact accepted by agent. Contact state is " + contact.getStatus().type);
} else {
logInfoEvent("[contact.onAccepted] Contact accepted by agent. Null contact passed to event handler");
}
}
function handleContactConnected(contact) {
if (contact) {
logInfoEvent("[contact.onConnected] Contact connected to agent. Contact state is " + contact.getStatus().type);
} else {
logInfoEvent("[contact.onConnected] Contact connected to agent. Null contact passed to event handler");
}
}
function handleContactEnded(contact) {
if (contact) {
logInfoEvent("[contact.onEnded] Contact has ended. Contact state is " + contact.getStatus().type);
} else {
logInfoEvent("[contact.onEnded] Contact has ended. Null contact passed to event handler");
}
}
function subscribeToAgentEvents(agent) {
window.myCPP.agent = agent;
agentGreetingDiv.innerHTML = '<h3>Hi ' + agent.getName() + '!</h3>';
logInfoMsg("Subscribing to events for agent " + agent.getName());
logInfoMsg("Agent is currently in status of " + agent.getStatus().name);
displayAgentStatus(agent.getStatus().name);
agent.onRefresh(handleAgentRefresh);
agent.onRoutable(handleAgentRoutable);
agent.onNotRoutable(handleAgentNotRoutable);
agent.onOffline(handleAgentOffline);
}
function handleAgentRefresh(agent) {
logInfoEvent("[agent.onRefresh] Agent data refreshed. Agent status is " + agent.getStatus().name);
displayAgentStatus(agent.getStatus().name);
}
function handleAgentRoutable(agent) {
logInfoEvent("[agent.onRoutable] Agent is routable. Agent status is " + agent.getStatus().name);
displayAgentStatus(agent.getStatus().name);
}
function handleAgentNotRoutable(agent) {
logInfoEvent("[agent.onNotRoutable] Agent is online, but not routable. Agent status is " + agent.getStatus().name);
displayAgentStatus(agent.getStatus().name);
}
function handleAgentOffline(agent) {
logInfoEvent("[agent.onOffline] Agent is offline. Agent status is " + agent.getStatus().name);
displayAgentStatus(agent.getStatus().name);
}
function logMsgToScreen(msg) {
logMsgs.innerHTML = '<div>' + new Date().toLocaleTimeString() + ' ' + msg + '</div>' + logMsgs.innerHTML;
}
function logEventToScreen(msg) {
eventMsgs.innerHTML = '<div>' + new Date().toLocaleTimeString() + ' ' + msg + '</div>' + eventMsgs.innerHTML;
}
function logInfoMsg(msg) {
connect.getLog().info(msg);
logMsgToScreen(msg);
}
function logInfoEvent(eventMsg) {
connect.getLog().info(eventMsg);
logEventToScreen(eventMsg);
}
function displayAgentStatus(status) {
agentStatusDiv.innerHTML = 'Status: <span style="font-weight: bold">' + status + '</span>';
}
function goAvailable() {
var routableState = window.myCPP.agent.getAgentStates().filter(function (state) {
return state.type === connect.AgentStateType.ROUTABLE;
})[0];
window.myCPP.agent.setState(routableState, {
success: function () {
logInfoMsg("Set agent status to Available (routable) via Streams")
},
failure: function () {
logInfoMsg("Failed to set agent status to Available (routable) via Streams")
}
});
}
function goOffline() {
var offlineState = window.myCPP.agent.getAgentStates().filter(function (state) {
return state.type === connect.AgentStateType.OFFLINE;
})[0];
window.myCPP.agent.setState(offlineState, {
success: function () {
logInfoMsg("Set agent status to Offline via Streams")
},
failure: function () {
logInfoMsg("Failed to set agent status to Offline via Streams")
}
});
}
function acceptContact() {
window.myCPP.contact.accept({
success: function () {
logInfoMsg("Accepted contact via Streams");
},
failure: function () {
logInfoMsg("Failed to accept contact via Streams");
}
});
}
function disconnectContact() {
//cannot do contact.destroy(), can only destroy (hang-up) agent connection
window.myCPP.contact.getAgentConnection().destroy({
success: function () {
logInfoMsg("Disconnected contact via Streams");
},
failure: function () {
logInfoMsg("Failed to disconnect contact via Streams");
}
});
}
</script>