AWS Contact Center

Securely pass the customer information to agent using Amazon Connect in-app, web, and video calling

Companies often add self-service capabilities to their websites or mobile applications, such as frequently asked questions (FAQs) or knowledge articles, to help customers address their queries. When that customer escalates to a live agent for help, they are often asked to repeat the same information they may have entered or browsed on the app or website.

To address this, companies implement third-party applications for web calling, screen sharing, or video that allows customers to call from their website or mobile. As a result, agents are often forced to move between multiple disconnected applications to support inbound telephone calls and web-based customer service calls. Companies then have to stitch together disparate records to understand basic customer service metrics, such as average handle time.

Amazon Connect has launched in-app, web, and video calling capabilities that make it easy to deliver personalized voice and video experiences from your websites and mobile applications. This feature can be implemented easily using a fully managed communication widget or software development kit (SDK).It enables customers to speak with your agents without ever having to leave the website or mobile application. It also allows you to pass contextual information to agent softphones. This helps you personalize the customer experience based on attributes such as the customer’s profile, authentication status, or customer actions previously taken within the app. This helps improve agent handling time and also customer satisfaction scores.

In this blog post, we will walk you through a sample use case of a customer initiating web and video calls from a webpage. We will also demonstrate how to transfer customer information to agents using Amazon Connect in-app, web, and video calling.

Overview of Solution:

Figure 1: Solution Architecture of a website with a form and integration with Amazon Connect in-app, web, and video calling.

In this solution, you will host a sample website on Amazon CloudFront and the static website content stored in Amazon S3. When customer submits a form in the website, attributes are sent to AWS Lambda via Amazon API Gateway. AWS Lambda then issues JSON Web Tokens (JWTs) for new requests, obtaining authentication credentials from AWS Systems Manager Parameter. The Communications Widget JavaScript is loaded onto the website initiates a call to Amazon Connect. It allows customer and agent connect seamlessly over audio and video.

Prerequisites: 

For this walkthrough, it is assumed that you understand and have access to the following resources:

Walkthrough:

1. Install AWS CDK (skip if you already installed it) and bootstrap CDK environment

npm -g install typescript
npm -g install aws-cdk
cdk bootstrap aws://ACCOUNT_ID/AWS_REGION

2. Using Git, clone the repository from GitHub.

git clone https://github.com/aws-samples/web-voice-video-calling-blog

3. Change the directory to the web-voice-video-calling-blog

cd web-voice-video-calling-blog/

4. Install the dependencies for the CDK project and AWS Lambda functions

mkdir -p lambda-layers/jwt-layer/nodejs
npm install jsonwebtoken --prefix lambda-layers/jwt-layer/nodejs
npm install

5. Deploy the CDK project using your AWS CLI profile. This will deploy the necessary resources in Amazon CloudFront, Amazon API Gateway, AWS Lambda and AWS System Manager for your project.

cdk deploy

(cdk version 2.127.0 is used for this project. If upgrade required, run npm install -g aws-cdk –force)

6. Once the CDK deployment has finished, navigate to `Outputs` under this stack, note down the values for Amazon API Gateway endpoint and the Amazon CloudFront website url.

AcWebCallingStack.Endpoint8024A810 = https://aaaaaaaa.execute-api.<region>.amazonaws.com/prod/ (Your Amazon API Gateway)
AcWebCallingStack.websiteURL =  https://aaaaaa.cloudfront.net (Your Amazon CloudFront  website url)

Step 3: Configure the out-of-the-box communication widget. 

1. Navigate into your Amazon Connect instance > Channels > Communication widgets.

2. Click on Add widget.

3. In the name enter ac_widget_webcalling and in Description field type Widget for web and video calling

4. Uncheck the Add chat under Communication options.

Figure 2. Amazon Connect Communication Widget.

6. Under Web calling contact flow> Choose Sample inbound flow (first contact experience)

7. Click Save and continue

8. Leave all default option and Click on Save and continue.

9. Add the website domain from the Amazon CloudFront website URL (from Step 2.5) in Add the required domains for the communication widget.

10. Choose the Yes option in Add security for new communication widget request, then Click on Save and continue.

11. Click on Copy script and save it in a text editor.

12. Please note down widgetId from the copied script. This will be used ahead in the Step 5.5. To find your widgetId, see the example Communications widget script.

13. Click on Copy key and save in a text editor. This will be used ahead in the Step 5.3.

Step 4: Update the index.html with apiEndpoint and widget script

1. Open the index.html file in your favorite editor from the website folder.

2. Update the apiEndpoint in line number 127 with your own Amazon API Gateway Endpoint (see Step 2.5)

Figure 3. Update the index.html.

3. Add your copied script from step 3.11 (Configure the out-of-the-box communication widget) between line 115 and 123 in the index.html. Important: Please remove </script> and <script> from your copied communication script. Save your changes.

4. Navigate into your AWS CLI and deploy the CDK project. This will update the changes in your resources.
cdk deploy

Step 5: Update the Connect secret Id and WidgetId  in AWS System Manager

1. Sign in to the AWS Management Console and navigate to AWS Systems Manager and click on Parameter Store under Application Management.

2. Click on /Blog/AcWebCalling/AmazonConnect/ConnectSecret and Edit.

3. In the Value field, please enter your Connect Secret key you saved in Step 3.13(Configure the out-of-the-box communication widget) and Click on Save changes.

Figure 4. Updating the Connect Secret in Parameter Store

4. Click on /Blog/AcWebCalling/AmazonConnect/WidgetId and Edit.

5. In the Value field, please enter your widgetId which you saved in Step 3.11 and Click on Save changes.

Step 6: Configure Amazon Connect step by step guides.

Amazon Connect Step-by-step guides let agent to see the attributes passed from the website in agent’s workspace. We will now import and configure 3 types of flows as listed below:

6.1 Create a step-by-step guides view flow:

  1. Download the ac_webcalling_SBSguide_view flow. Note: Depending on your browser you may need to right click the link and choose Save Link As in order to download the flow properly.
  2. Navigate into your Amazon Connect instance > Routing > Flows > Create flow.
  3. Click the drop-down arrow on the right and choose Import (beta) and import the downloaded flow.
  4. Click Publish.

6.2. Create an incoming call flow:

  1. Download the ac_webcalling_SBSguide_handler. Note: Depending on your browser you may need to right click the link and choose Save Link As in order to download the flow properly.
  2. Navigate into your Amazon Connect instance > Routing > Flows > Create flow.
  3. Click the drop-down arrow on the right and choose Import (beta) and import the downloaded flow.
  4. Click Publish.

6.3 Update the incoming call and step-by-steps flows:

  1. Open the ac_webcalling_SBSguide_view flow created in step 6.1.
  2. Click Show Additional Flow Information on the bottom of the flow editor.
  3. Copy the flow ID of your ac_webcalling_SBSguide_view flow.
  4. Return to the ac_webcalling_SBSguide_handler flow created in step 6.2.
  5. Open the Set contact attributes block.


Figure 5: Update the incoming call flow

  1. Set the value of DefaultFlowForAgentUI to the flow ID that you copied in step 6.3.2. This attribute decides what step-by-step guides to show your agent when the call is routed to them. Note: Replace “ENTER ac_webcalling_SBSguide_view FLOW ID HERE” with flow ID for ac_webcalling_SBS_guide_view.
  2. Save the Set contact attributes block.
  3. Open the Set working queue block.
  4. In this block, set the queue to correspond with the queue that you want to use while testing the solution. It is recommended that you make a new queue for this example in order to avoid impacting your contact center operations.
  5. Save the Set working queue block and click Publish to publish the updated flow.

Step 7: Update the Amazon Communication widgets

  1. Navigate into your Amazon Connect instance > Channels > Communication widgets
  2. Click on ac_widget_webcalling and Click on Edit on Details section.
  3. In the Web calling contact flow, change the flow to ac_webcalling_SBSguide_handler and Click on Save and continue.

Figure 6. Update of Amazon Connect Communication Widgets.

  1. Click on Save and Continue.
  2. Click on Save and Continue.

Step 8: Update the Amazon Connect security profile:

In order for agents to use video calls and step-by-step guides, permission needs to be added to the Contact Control Panel (CCP) and agent workspace. To add these permissions:

  1. Navigate into your Amazon Connect instance > > Users > Security profiles.
  2. Click the security profile you want to provide permission to create and access step-by-step guides with.
  3. Click Channels and flows.
  4. Click the All checkbox next to the Views type.
  5. Click Agent Applications.
  6. Click the All checkbox next to the Custom Views type.
  7. Click the Contact Control Panel (CCP).
  8. Click the checkbox next to Video Calls and Save.


Figure 8. Security configuration for Contact Control Panel.

  1. Click on Save.

Testing:

    1. Login into Amazon Connect agent workspace as an agent using the security profile you configured in the step above.
    2. Enter the Amazon CloudFront URL (from the Step 2.5) in your browser and enter the form information. Click on Submit.


Figure 9. Customer view of Amazon Connect in-app, web, and video calling.

  1. Click on Start Call icon to start a video call.
  2. When the call is routed to the agent workspace, click on “Accept”. You will see the entered variable from the website in your agent workspace along with video and voice call.


Figure 10. Customer view of Amazon Connect in-app, web, and video calling.

  1. On the website, customers can engage in video and voice conversations with the agent.


Figure 11. Agent view of Amazon Connect in-app, web, and video calling.

Clean Up:

    1. Navigate into your AWS CLI to web-voice-video-calling-blog

cd web-voice-video-calling-blog

  1.  Running “cdk destroy” will remove the installed resources in Amazon CloudFront, Amazon API Gateway, AWS Lambda and AWS System Manager.

cdk destroy

  1. [Optional] Run the delete-contact-flow command for both the ac_webcalling_SBSguide_handler flow and the ac_webcalling_SBSguide_view flow.

Conclusion:

In this blog post, we walked you through the new Amazon Connect in-app, web, and video calling capabilities. Using the fully managed communication widget, companies can implement this feature in their websites and mobile applications with just a few clicks. Once a customer is connected, it allows companies to you personalize the customer experience based on attributes such as the customer information (e.g., VIP member) or other information (e.g., website page), enabling contacts to be prioritized, automatically resolved when possible, and routed to the best available agent when human assistance is required.

TAGS: Web calling, Video calling, in-app calling, digital channels, and Amazon Connect.

Authors bio

Pavan Dusanapudi is a Specialist Solutions Architect at Amazon Web Services for AWS Application Sales in Manchester, UK. He enables customers to achieve business outcomes through Customer Experience solutions and digital transformation. In his free time, he enjoys family hiking, CrossFit workout, and finding inner peace.
Prabhakar Rajasekar is a Specialist Solution Architect at Amazon Web Services for AWSI Application Sales based in Aachen, Germany. Besides helping customer in their digital transformation, you will see him spending time with his kids in the garden or in the woods.