Business Productivity

Video-Call Escalation powered by Amazon Connect and Amazon Chime SDK

In late 2019 and early 2020, the concept of a “routine” shifted overnight in both professional and personal arenas. Terms like “social distancing”, “shelter at home”, and “quarantine” have become mainstream buzzwords, and many jobs normally accomplished in an office have moved to virtual settings. Making agents accessible through multiple channels (such as voice, chat, and video) without imposing downloads or additional requirements has become critical for businesses trying to maintain a high standard for customer service.

In this blog, we will teach you to deploy a video, audio, and screen share enabled chat interface for contact center agents on Amazon Connect in addition to a browser-based participant interface that can be used as a standalone site or integrated into existing company website.

Overview

This solution will help you enable Video Communication in a Contact Center environment. We are using Amazon Connect, and Amazon Chime SDK.

Walkthrough

On a high level, the solution consists of five components, each contained in a separate folder.

  • agent-app – web based (React) agent application, including Amazon Connect Streams API and Amazon Chime SDK
  • demo-website – a demo webpage for customers, including Amazon Connect Chat SDK and Amazon Chime SDK
  • cdk-stacks – AWS CDK stacks:
    • cdk-backend-stack with all the backend resources needed for the solution (AWS Lambda, Amazon API Gateway, Amazon Cognito etc)
    • cdk-frontend-stack with front-end resources for hosting both agent-app and demo-website (Amazon S3, Amazon CloudFront distribution)

Prerequisites

  • AWS Account
  • AWS IAM user with Administrator permissions
  • Amazon Connect instance (SSO/SAML enabled)
  • Node and NPM installed and configured on your computer
  • AWS CLI installed and configured on your computer
  • AWS CDK installed and configured on your computer

Solution setup

This step assumes you have completed all the prerequisites, and you have an existing Amazon Connect instance, SSO/SAML enabled.

Creating and Customizing the Solution:

  1. Clone the solution to your computer (using git clone) https://github.com/amazon-connect/video-call-escalation
  2. Import Amazon Connect Contact Flows
    1.  Log into your Amazon Connect console, as Admin
    2. From the main menu, select Routing -> Contact Flows
    3. Click the drop-down button next to Create contact flow, and select Create customer queue flow.
    4. Click the drop-down button next to Save, and select Import flow
    5. Browse to solution’s ConnectContactFlows folder and select VideoCallEscalationQueue file
    6. Save and Publish the contact flow
    7. Navigate again to Routing -> Contact Flows
    8. Click Create contact flow button
    9. Click the drop-down button next to Save and select Import flows
    10. Browse to solution’s ConnectContactFlows folder and select VideoCallEscalationChat file
    11. Save and Publish the contact flow
  3. Check Command Line Interface (AWS CLI)
    1. AWS CDK acquires its authorization from the AWS CLI credentials based on the specific associated region.
    2. Confirm that your AWS CLI configuration aligns to your desired output by running an AWS CLI command
      (example command to see configuration: aws s3 ls)
    3. You can also use profiles (i.e. export AWS_PROFILE = yourProfile)
    4. You can confirm the configured region with
      aws ec2 describe-availability-zones --output text --query 'AvailabilityZones[0].[RegionName]'
  4. Install NPM packages
    1. Open your Terminal and navigate to video-call-escalation/cdk-stacks
    2. Run npm run install:all
    3. This script goes through all folders of the solution and installs necessary packages
  5. Make any desired modifications to the background image or chat icon image shown below.
    1. Navigate to the demo-website/src folder and import/upload your revised images.
      1. Make sure to maintain the same naming convention image format and extension
      2. For chat icon: replace chat-video-button.png

        1. For chat icon: replace chat-video-button.png

Configuring and Deploying the Solution:

  1. Configure CDK stacks
    1. In your terminal, navigate to video-call-escalation/cdk-stacks
    2. To see the full instructions for the configuration script, run node configure.js -h
    3. For the purpose of this guide, start the configuration script in interactive mode node configure.js -i
    4. When prompted, provide the following parameters:
      1. connect-instance-arn: Amazon Connect instance ARN that solution will use
      2. connect-instance-url: Amazon Connect instance URL that solution will use
      3. connect-default-contact-flow-id: Amazon Connect Contact Flow Id for the Contact Flow to be started when a new Chat contact is initiated (video-call-escalation Chat Flow Id).
      4. cognito-domain-prefix: Amazon Cognito hosted UI domain, where users will be redirected during the login process. The domain prefix has to be unique.
      5. agent-api-allowed-origins: Allowed Origins for agent-side APIs, please keep * at this point, we will come back to it once our front-end is deployed.
      6. website-api-allowed-origins: Allowed Origins for (demo-)website-side APIs, please keep * at this point, we will come back to it once our front-end is deployed.
      7. cognito-saml-enabled: for the purpose of this guide, set this parameter to false
      8. cdk-pipeline-enabled: for the purpose of this guide, set this parameter to false
    5. The script stores the deployment parameters to AWS System Manager Parameter Store
  2. Deploy CDK stacks
    1. In your terminal, navigate to video-call-escalation/cdk-stacks
    2. Run the build script: npm run build:frontend
    3. This script builds frontend applications (agent-app, demo-website)
    4. In case you started with a new environment, please bootstrap AWS CDK: cdk bootstrap
    5. Run the deploy script: npm run cdk:deploy
    6. This script deploys CDK stacks
    7. Wait for all resources to be provisioned before continuing to the next step
    8. AWS CDK output will be provided in your Terminal (Amazon Cognito User Pool Id, Amazon CloudFront Distribution URL)
  3. Configure Amazon Connect Approved Origins
    1. Login to your AWS Management Console
    2. Navigate to Amazon Connect -> Your instance alias -> Approved origins
    3. Click + Add origin
    4. Enter your Amazon CloudFront Distribution URL (from the previous step)
  4. Configure API Allowed Origins (optional)
    1. Cross-origin resource sharing (CORS) is a browser security feature that restricts cross-origin HTTP requests that are initiated from scripts running in the browser. At this point, we can restrict our APIs to be accessible only from our Amazon CloudFront Distribution domain (origin).
    2. In your terminal, navigate to video-call-escalation/cdk-stacks
    3. Start the configuration script in interactive mode, with additional -l (load) parameter: node configure.js –i -l
    4. The script loads all the existing parameters, and prompts for new parameters to be provided
    5. Accept all the existing parameters, but provide new values for:
      1. agent-api-allowed-origins: Domain of your agent application, in this case Amazon CloudFront Distribution URL. For instance: https://aaaabbbbcccc.cloudfront.net
      2. website-api-allowed-origins: Domain of your (demo-)website application, in this case Amazon CloudFront Distribution URL. For instance: https://aaaabbbbcccc.cloudfront.net
    6. For the demo purpose, both agent-app and demo-website are hosted at the same Amazon CloudFront Distribution, but these would, most probably, be different in your production environment.
    7. The script stores the deployment parameters to AWS System Manager Parameter Store
    8. While in video-call-escalation/cdk-stacks, run the deploy script: npm run cdk:deploy
    9. Wait for the CDK stacks to be updated
  5. Create a test agent (user)
    1. To create an Amazon Cognito user, you’ll need Cognito User Pool Id (created in step 6 – check for the AWS CDK Output, or check it in your AWS Management Console > Amazon Cognito User Pools)
    2. Create an Amazon Cognito user by running:
      aws cognito-idp admin-create-user --region yourDesiredRegion --user-pool-id yourUserPoolId --username yourEmailAddress --user-attributes Name=name,Value=YourName
    3. You will receive an email, with a temporary password, which you will need in the next step
    4. To create an Amazon Connect user, login into your Amazon Connect Console, select Users -> User management from the main menu
    5. Click Add new users button, then click Next
    6. Provide First name, Last name
    7. Set Login name as your email address (as you have set when creating Cognito user)
    8. Set Routing Profile (i.e. Basic Routing Profile)
    9. Set Security Profile (i.e. Agent)
    10. Click Save, then Create users
    11. Note: Amazon Cognito accepts + in the email (user name), for instance when using a single email address for multiple users, while Amazon Connect UI doesn’t support + in the user name. Therefore, create Amazon Cognito user with +, but in Amazon Connect, replace + with _

Test the solution

  1. Open your browser and navigate to Amazon CloudFront Distribution URL
  2. On the Login screen, provide your email address and temporary password you received via email
  3. In the demo solution, you will be asked to confirm your email address – select Email and wait for the confirmation code to be delivered, then enter the confirmation code in the form and submit
  4. At this point, the agent is logged in, and you could see Amazon Connect CCP on the left-hand side, and Amazon Chime meeting form on the right-hand side
  5. In the top-right corner, click on ‘Demo website’ link (best to open it in a new, detached window)
  6. On the demo-website, click the “Video Call now” button, in the bottom-right corner
  7. When prompted, provide your name (as a customer name)
  8. Provide your email address – please note, the demo Contact Flow (VideoCallEscalationChat) routes the chat contact to agent’s personal queue (based on this email address)
  9. Once customer is in queue, set your agent to Available state
  10. Accept the incoming Chat contact
  11. Exchange a couple of messages between agent and customer (i.e. asking customer about upgrading to video call)
  12. On the agent side, in the Join Meeting form, click Continue
  13. This would trigger a device selection form, on both Agent and Customer side
  14. Join the meeting on the agent side
  15. Join the meeting on the customer side
  16. Camera(s) are disabled by default, click the camera button on each side to enable
  17. Test screen share (click on Content share button)
  18. End chat on the customer side
  19. Clear chat contact on the agent side
  20. Agent is ready for a next contact

Clean up

To remove the solution from your account, please follow these steps:

  1. Remove CDK Stacks
    1. Open your Terminal, navigate to video-call-escalation/cdk-stacks
    2. Run cdk destroy --all
  2. Remove deployment parameters from AWS System Manager Parameter Store
    1. In your Terminal, navigate to video-call-escalation/cdk-stacks
    2. Run node configure.js -d

Conclusion

Having an easily accessible and intuitive contact center is key to earning customer trust and loyalty. By combining AWS Services, Amazon Connect and Amazon Chime SDK, organizations can empower their contact center agents and customer with the tools required to facilitate these interactions while removing unnecessary complexity.