How do I set an agent's status to Offline automatically when they close the Amazon Connect CCP?

Last updated: 2021-12-13

When agents in my Amazon Connect contact center close the Contact Control Panel (CCP) window, I want their status automatically changed to Offline. How do I set that up?

Short description

Use the Amazon Connect Streams API and the Agent API to integrate the CCP into a custom application for your contact center.

For an example custom CCP setup, see How do I display caller contact attributes in an Amazon Connect screenpop?

Note: When using the default Amazon Connect CCP, closing it doesn't change an agent's status from Available to Offline. Agents must change their status manually.

Resolution

Important: The following instructions provide basic examples and resources. You must determine how to implement the Streams API and develop the JavaScript client code for your own use case and contact center requirements.

Set up your Amazon Connect instance's CCP in a custom web application

For instructions, see the Amazon Connect streams documentation on GitHub.

Update your application code

Integrate the following Streams API calls into your web application:

1.    Use connect.agent() to subscribe to agent events and retrieve agent objects.

let mAgent;
connect.agent(function(agent) {
 mAgent = agent;
});

2.    Call agent.setState() in the onbeforeunload event handler to change the agent state.

window.addEventListener("beforeunload", function(event) {
 if (mAgent != null) {
 let states = mAgent.getAgentStates();
 // "states" is an array of changeable states. You can filter the desired state to change by name.
 let offlineState = states.filter(state => state.name === "Offline")[0];
 // Change agent state
 mAgent.setState(offlineState, {
 success: function() {
 console.log("SetState succeeded");
 },
 failure: function() {
 console.log("SetState failed");
 }
 });
 }
});

Design for errors

If an API call fails and a contact takes the error branch of your contact flow, then an agent's status might not change as expected. Make sure that you include logic in your custom code to account for this possibility.

For example: You can delay the page unload while the API call is tried again. Or, you can enter a "Call failed" warning message in a modal dialog box before the page unload.