How to set next status for an agent using Amazon Connect Streams API

In a busy contact center, agents can often be routed contacts back-to-back, making it difficult for agents to go offline or on a scheduled break.

Amazon Connect now offers the ability for agents to set a next status while on a contact. An agent can pause new contacts from being routed to them while finishing up their on-going work. This feature is available in the latest version of Amazon Connect’s standard Contact Control Panel (CCP). You can also enable this feature for custom CCP, using the Amazon Connect Streams API

In this blog post, you will examine how to use NextAgentStatus for setting the agent status using Amazon Connect Streams API. You can use these API operations within your existing solutions. Additionally, you can also explore them through custom user interface (UI) by following the steps detailed in this post

Overview of solution

This solution uses an AWS CloudFormation template. It creates an Amazon S3 bucket and loads all the assets into CloudFront for this solution. As a user, you use the CloudFront URL of the website to test different scenarios

Prerequisites

For this walkthrough, you should have the following prerequisites:

• An AWS account
• An existing Amazon Connect instance
• Access to AWS services
  • AWS IAM with access to create policies and roles
  • Amazon CloudFront with access to create a distribution
  • Amazon S3 with access to create buckets
  • AWS CloudFormation to run the stack
• AWS IAM access key and secret access key credentials to access your instance queues using the API operations

Deploy the solution

Note: The CloudFormation template will deploy resources in the US East (N. Virginia) Region.

Overview of the steps:

1. Create the CloudFormation stack
2. Use the CloudFront web UI to access the portal
3. Configure AWS credentials to manage the quick connects of an Amazon Connect instance
4. Add/delete/modify/read/ quick connects in an instance
5. Test and validate the solution by placing call and change the status while on the call

CloudFormation deployment:

1) Sign in to the AWS Management Console in the US East (N. Virginia) region.

2) Launch the CloudFormation template here:

3) Enter a unique stack name (e.g. agent-nextstatus-blog).

4) Enter a globally unique name for a new S3 bucket. The template creates and stores all the assets that are required for the website you access through the Amazon CloudFront URL.

5) Check the box for “I acknowledge that AWS CloudFormation might create IAM resources.”

6) Choose Create Stack.

7) The AWS CloudFormation template may take 15-30 minutes to create all the resources. Once done, it will show the status as “CREATE_COMPLETE”. It may take another 15-20 min for Amazon CloudFront to complete its deployment of the website assets after the status changes to “CREATE_COMPLETE”.

Launch the Amazon Connect custom CCP user interface website

1) Navigate to AWS CloudFormation in the AWS Management Console, and choose the stack that you created earlier

2) Go to the Outputs section of the newly created stack. Copy the CloudFrontEndpoint URL from the Value column

3) Select “Approved origins” and add the URL that you copied in the previous step

4) Open the URL in a new browser tab or window and navigate to the Amazon Connect custom CCP website. A new window will pop up and prompt you to enter Amazon Connect agent credentials to sign in into the site.

Launch the Amazon Connect custom CCP user interface website

You will now sign in as an agent into the Amazon Connect instance with the custom CCP.

1) Enter the Username and Password for your agent and click on the “Sign In” button.

2) After successful login, the new window will automatically close in approximately 10 seconds.

3) You will be prompted to provide access to microphone and speaker, click the “Allow” button

4) To make the agent available to receive a call, select the list box and choose the option “Available” or click on the “LET’S GO!” button.

5) Enter a number to dial in the text box in E.164 format, for example in the US +15550011234 and choose the “Call” button.

6) Amazon Connect will call and set the agent status as “Busy”

7) While you are on call, select the list box and choose “Offline”, this will ensure you will not get any further interactions (for example: chat, tasks, or another voice call). You will notice the label “Next Status” changes to “Offline”

8) Click the “Hang-UP” button, that will disconnect the call you made put you in “AfterCallWork” and you will have the next status to “Offline”

9) In the Amazon Connect instance, if you have set “After call work (ACW) timeout” to a value of “0”, then use the “Clear” button to put yourself in the “Offline” status.

10) If you have set “After call work (ACW) timeout” to a value other than “0”, for example. 10, then Amazon Connect will automatically put you into the “Offline” status after 10 seconds. You would then not have to click the “Clear” button

Code walkthrough

The following is the code that puts the agent in the next status :

		function changeAgentState(myStateARN) {
			var newState = window.ccp.agent.getAgentStates().filter(function (state) {
				return state.agentStateARN === myStateARN;
			})[0];
			console.log(newState);
			//This is the main execution code to change the state
			window.ccp.agent.setState(newState, {
				success: function () {
					console.log("Set agent status to available via Streams");
				},
				failure: function (data) {
					console.log(data);
					console.log("Failed to set agent status to available via Streams");
				}
			},{enqueueNextState : true});
		}
	

In the preceding code for the agent.setState() function a new parameter, enqueueNextState, with value of “true” is added. This parameter will set the agent to a different state while the agent is still on an interaction.

		agent.onEnqueuedNextState(agentEnqueuedNextState);
	

You can subscribe using a callback function (as shown above using agentEnqueuedNextState) to notify when an agent is enqueued for the next state and show the status in your custom CCP

		function agentEnqueuedNextState(agent) {
			console.log("in the agentEnqueuedNextState function: " + agent.getName() + " is now enqueued for " + agent.getNextState().name);
			$("#agentNextStatus").text(agent.getNextState().name);
		}
	

To clear the call and move to the next status that the agent has selected, you must run the following function :

		 $("#btnClean").click(() => {
			window.ccp.contact.clear();
			$("#agentNextStatus").text("-");
		});
	

Cleaning up

To avoid incurring future charges, remove all created resources by deleting the CloudFormation stack

Conclusion

This post demonstrates how to use the new agent next status in Amazon Connect to put an agent in a status while they are handling an interaction, and instruct Amazon Connect stop sending future interactions (Voice/Chat/Tasks). Using the new APIs, you can programmatically:

• Set an agent to next status while handling an interaction.
• Show the next status that was chosen by the agent.
• Clear the interaction to put the agent in the chosen state.

You learned how to perform the following functions programmatically through the web user interface:

• How to subscribe to the agent.onEnqueuedNextState() and display the status to the agent.
• How to check the new status that was chosen by the agent while handling the interaction.

Related links

To learn more about the technologies or features used to create this solution, see the following:

• Amazon Connect
• AWS CloudFormation
• Amazon S3
• Amazon CloudFront
• AWS-SDK