AWS Contact Center

Manage agent softphone settings with a custom Contact Control Panel

With Amazon Connect, contact center agents can either use the Contact Control Panel (CCP) soft phone or send calls to a desk phone (a PSTN or mobile number) when answering calls. Sending a call to the desk phone is considered an outbound call from Amazon Connect and comes with additional cost.  If there are a large number of agents whose settings need to be changed, it could take the supervisor a significant amount of time, taking time away from their other duties.

This blog provides a way to reduce the time that supervisors spend managing the desk phone settings of their agents.  With the desk phone reset project, supervisors can quickly see the desk phone settings for all of the agents in their contact center and with the click of a button bulk reset this setting.

In this blog, you will deploy a serverless website that contains an enhanced Contact Control Panel for Amazon Connect with bulk deskphone resetting functionality.  Using a CloudFormation template, you will deploy all of the necessary architecture to support the functionality of this new feature.

Overview of the Solution

This solution builds a UI and associated infrastructure to allow Amazon Connect administrators to switch Amazon Connect agents to Soft Phones from Desk Phones for additional cost savings. Administrators can view the agents prior to making change, allowing for training and internal follow-ups.

The solution is completely serverless, leveraging Amazon S3 to store a static website that hosts the Administrator CCP and custom JavaScript to enable the rest of the requests. Amazon CloudFront serves as a content delivery network (CDN) to allow a public frontend for the website. Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment

The backend features Amazon API Gateway with HTTP routes for three Lambda functions that allow the UI to query if the current user is an administrator, get the status of all agents, and set agents back to soft phones. To optimize processing, agent status is stored in a DynamoDB table that is updated via a Lambda function triggered by Event Bridge. Only the users in Amazon Connect with ‘Admin’ Security Profile have the privilege to set the phone status. If any other security profile requires this capability, the UI code and Lambda function will need to be adjusted accordingly.

We recommend integrating this application with your organization’s Identity Provider and authorizing the API Gateway functions using the Identity Provider, the solution implemented here is built with anonymous access so that it can be customized to meet your needs.

 

Prerequisites

For this walkthrough, you should have the following prerequisites:

  • An AWS account
  • An existing Amazon Connect Instance
  • Access to the AWS Management Console and access to Amazon Connect Service Interface (in AWS management console – see step 2) with permissions to execute CloudFormation Template including the following AWS Services : Amazon API Gateway,  Amazon CloudFront,  AWS Lambda, Amazon DynamoDB, Amazon Eventbridge
  • You will create a CloudFormation Template, which will automate the process of building all resources needed for this blog solution.   Please be sure your Connect Instance in the same Region where you will create your S3 bucket and launch your CloudFormation template.

Walkthrough

The solution has two sets of steps:

  1. Setting up the resources for the solution using AWS CloudFormation
  2. Configuring Amazon Connect to integrate with the Disable Desk Phone UI

Setting up CloudFormation template

  1. Download WebSite Helper code from following S3 location into your local machine: https://amazon-connect-blog-channel-artifact.s3.us-west-2.amazonaws.com/WebSiteHelper.zip
  2. Download CloudFormation template from S3 location into your local machine: https://amazon-connect-blog-channel-artifact.s3.us-west-2.amazonaws.com/DisableDeskPhoneBlog.yaml
  3. Create a new S3 bucket in your preferred region
  4. Create a new prefix under this new bucket called custom-ccp-portal
  5. Upload WebSite Helper Zip file (downloaded in step 1) into this subfolder (custom-ccp-portal)
  6. Create a CloudFormation Stack using the template file downloaded in step 2
  • Enter Stack name (e.g., deskphone-disable), parameters. Click Next

  • To find Amazon Connect Instance ID and Amazon Connect Instance Name, please see the screenshot below on how to capture it.

  • Click on ‘Next’ again
  • Select the “I acknowledge that AWS CloudFormation might create IAM resources” option followed by clicking on ‘Create Stack’ button

  • When the CloudFormation stack has successfully run, click on the Outputs tab and copy the URL for CloudfrontEndPoint as shown:

Connect Integration Steps:

  1. In the AWS Portal, go to Services, Amazon Connect
  2. Click on the Amazon Connect Alias you want to connect the Disable Desk Phone solution to
  3. Click on Approved Origins in the left hand navigation
  4. Click on the Add origin link as shown here:
  5. Paste the URL copied from the Outputs of the Stack and delete the /adminDesktop.html at the end as shown: (Note:  The Add button will remain Gray until only the URL is present.  Including the /adminDesktop.html or a trailing slash will not allow you to continue)
  6. Paste the full URL into an Amazon Connect supported browser to launch the Contact Control Panel (CCP) to demonstrate the functionality of this solution.  You should see the following and be prompted to log in. Agent status is polled from Dynamo DB every 5 minutes.

Cleaning up

To avoid incurring future charges, delete the resources created for this blog.

  1. Delete your S3 bucket manually that you provided as input in step 2 (CustomCCPS3BucketForWebSite)
  2. Open the CloudFormation console
  3. Locate the stack (e.g., deskphone-disable) you created in step 2
  4. Select the radio option next to it
  5. Select Delete
  6. Select Delete stack to confirm

Conclusion

In this blog, you learned how to use the Amazon Connect APIs, AWS Lambda, Amazon DynamoDB, and Amazon EventBridge to gather desk phone setting information and present it to a contact center manager in a custom Contact Control Panel.  This configuration provides a single location to view and update desk phone settings for all agents in the system.

A suggested future enhancement beyond what is shown in this blog is the ability to change the desk phone setting on a per agent basis and filtering out agents that are displayed by agent hierarchy.  This gives managers more granular access to the agents that they manage and lets them determine what agents are permitted to continue using the desk phone setting.

Please note: This is a sample project designed to be easily deployable for experimentation. The IAM policy permissions use least privilege, however the AWS CloudFront and API Gateway deployed will be publicly accessible. Please take the appropriate measures to secure your CloudFront distribution and API Gateway following the public documentation https://docs.thinkwithwp.com/AmazonCloudFront/latest/DeveloperGuide/SecurityAndPrivateContent.html  and https://docs.thinkwithwp.com/apigateway/latest/developerguide/security.html