AWS Contact Center

Click to Call in Amazon Connect

Customers can try to find answers on company websites or mobile app before contacting customer service. Customer experience executives have struggled to carry that web or mobile click-stream behavior and context into the contact center interaction. The idea of creating a continuation of customer journey from web/mobile into the contact center for personalization, automation, and routing seems far-fetched.

In this blog post ,we look at how Amazon Connect helps customers solve that by creating a unified experience for their users. This reduces friction associated with channel switching from web/mobile to phone. In addition to effortless customer experience, Click to Call in Amazon Connect also results in significant cost savings. Customers IVR time is decreased. NLU Bots are not required for capturing caller intents/information. Calls can be routed to the right skill based upon contextual information from the web. Amazon Connect customers also take advantage of significant cost savings on Telephony Charges. An inbound call on US TFN incurs more charges whereas same call through click to call to a US number will incur less telephony charges.

Amazon Connect provides two mechanisms for click to call.

1.    Customer First

In this experience, the customer is called immediately and they’re put in a queue so that they can be connected to an agent.

2.    Agent First

In this experience, an agent is reserved, and once they are ready to contact the customer, a call is initiated to them.

We will explore both mechanisms as we deploy a solution that uses the following AWS services:

  • Amazon Connect as your contact center in the cloud. It allows you to set up contact centers and contact flows to handle customer interactions.
  • AWS Lambda handles the event-driven request coming from click to call applications, it makes API calls into Amazon Connect.
  • Amazon API Gateway exposes a REST endpoint that web/mobile applications for click to call can consume.
  • AWS Identity and Access Management (IAM) will be used to control access/permissions.
  • Amazon S3 stores a sample click to call web application that can be used to interact with Amazon Connect.
  • Amazon CloudFront exposes the sample web application, and makes it available to users across the globe.

Solution Overview

We provide two options that you can choose to implement this solution:

1. Deployment using CloudFormation

Or

2. If you want to learn by doing, there are detailed steps included for manual configuration.

If you choose to use CloudFormation, a sample click to call static website application is exposed for public access using Amazon CloudFront. If you choose to follow the walk-through, the website application won’t be hosted on CloudFront, instead, you run it locally from your browser.

Architecture Diagram

The following diagram illustrates our server-less architecture:

Customer First

  1. Customers browsing web or mobile applications can opt for click to call. They can pass contact information such as their name and phone number, and also specify the reason why they want to be contacted. Upon form submission, their web form choices are passed to a REST endpoint exposed by Amazon API Gateway.
  2. An AWS Lambda function processes each request and makes an API call into Amazon Connect.
  3. Amazon Connect calls the customer first and connect them to agent.

 Agent First

  1. Customers browsing web or mobile applications can opt for click to call. They can pass contact information such as their name and phone number, and also specify the reason why they want to be contacted. Upon form submission, their web form choices are passed to a REST endpoint exposed by Amazon API Gateway.
  2. An AWS Lambda function processes each request and makes an API call into Amazon Connect.
  3. Amazon Connect assigns a task to an agent assigned to the queue that handles click to call contacts. Once the agent is available, they will call the customer back.

Prerequisites

To implement this solution, you should have the following prerequisites:

  • An AWS account
  • AWS IAM user with permissions to create AWS IAM policies, and roles, Amazon API Gateway resources, and AWS Lambda functions.
  • An Amazon Connect instance.
  • A Call Center Manager or Admin user account for Amazon Connect instance.
  • An existing phone number registered in the same Amazon Connect instance. If you don’t have one, check how to Claim a new phone number.
  • An existing Amazon Connect Routing Profile and Queue linked to the phone number to be used for click-to-call.

Deploy using AWS CloudFormation

If you want quickly test this solution, you can deploy it using AWS CloudFormation. It will deploy and configure all the services needed.

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.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/SecurityAndPrivateContent.html and https://docs.aws.amazon.com/apigateway/latest/developerguide/security.html.

To begin, log into the AWS Management Console and make sure that you have selected the AWS Region where you have your Amazon Connect instance. Then follow the next steps:

  1. Choose the Launch Stack button below to create a stack called ClickToCallDemo:
  2. Update the default parameters of the stack to match your environment. You need:
    • A valid Amazon Connect Instance ID (e.g., c63d337d-dd7d-422e-bb87-a37de35xxxx).
    • A valid phone number in E.164 format, registered in the same Amazon Connect Instance (e.g., +14157650489)
    • The Amazon Connect Queue ARN of the queue to be used to take customer calls coming from click to call (e.g. “`arn:aws:connect:us-west-2:111111111111:instance/744bad18-0123-426d-868e-00f549cxxxxx/queue/7c0cd886-72ae-4180-9b4a-7b63b5exxxxx“`). You can obtain your queue ARN within your Amazon Connect instance by going to Routing, then Queues, select your desired queue and click on the ‘Show additional queue information’ drop down.

3. In the blue information box, tick all the options. This gives AWS CloudFormation permission to create IAM resources needed to run this solution on your behalf:

check stack options for acknowledgement

4. Click the Create Stack button.

At this point, you must wait until the stack is created. This should take less than 5 minutes. Once it has completed, continue with the following steps:

5. Click on the Outputs tab:

Stack outputs

6. Open the link for CloudFront distribution in a separate browser tab/window. You should see the sample web application that we will use to test click to call:

website for testing click to call

Before you can test the application, you need to update your routing profile as discussed in the end of this blog post.

Walkthrough

If you have deployed the solution using cloud formation template, you can skip to update routing profile section.

Note: This is a sample project designed to be easily deployable for experimentation. The AWS Identity and Access Management (IAM) policy permissions use least privilege, however Amazon CloudFront, and Amazon API Gateway resources deployed will be publicly accessible.

Find below the high-level steps for manual configurations.

  1. Publish Amazon Connect contact flow
  2. Create IAM policy
  3. Create IAM Role
  4. Create Lambda Function making use of IAM Role and sending requests to Amazon Connect Contact Flow
  5. Create a REST endpoint in Amazon API Gateway
  6. Website for testing

1. Contact Flow

  1. In the Amazon Connect console, choose Routing by clicking on the three arrowheads icon on the left bar and then click on Contact flows.
  2. Click on Create contact flow button.
  3. Give your contact flow a descriptive name such as ‘ClickToCall’. You can download this sample contact flow and import it in your environment by selecting it from the dropdown menu next to the Save button.
  4. Once this contact flow is imported, you can save and publish it making use of the Save and Publish buttons on the top-right corner of the screen.

Amazon Connect contact flow

This contact flow is checking if contact is an Amazon Connect Task request. For voice contacts it is also adding an optional extra layer of security by making callers enter a randomly generated number to proceed.

Once the contact flow has been published, make note of instance ID, contact flow ID, and a telephone number claimed in your Amazon Connect instance.

  1. To get your Amazon Connect instance ID, contact flow ID, Account Number and Region
  2. Under ARN, copy the Amazon Resource Name (ARN). It looks like the following:
    arn:aws:connect:region:123456789012:instance/12a34b56-7890-1234-cde5-6789f0a1b2c3/contact-flow/123a45b6-c7d8-9012-34e5-6fab789c012d

The ARN includes your Region, Account Number, Amazon Connect instance ID and your contact flow ID. You need these IDs for later steps.

You will also require a phone number claimed in Amazon Connect that will show up as Caller ID Number. You can note an existing phone number on Amazon Connect instance or Claim a new phone number.

2. IAM Policy

Next step is to create an IAM policy that will give necessary permissions to Lambda function to invoke Amazon Connect API operations to generate click to calls:

  1. In AWS Management Console, search for IAM and navigate to IAM Dashboard
  2. On the Left Menu click on Policies
  3. Click on Create Policy
  4. Switch to JSON view and replace the existing template by pasting the following IAM policy 
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "connect:StartOutboundVoiceContact",
                "connect:StartTaskContact"
            ],
            "Resource": [
                "arn:aws:connect:REGION:AccountNumber:instance/Instance ID/contact/*",
                "arn:aws:connect:REGION:AccountNumber:instance/InstanceID/contact-flow/ContactFlowID"
            ]
        }
    ]
}
  5. You will need to replace the REGION, ACCOUNT, Instance ID and Contact Flow ID in the Resources section of your policy with actual values. You noted them when you published the contact flow in previous step.
  6. Click on Next: Tags
  7. You can leave the optional tags blank and click on Next: Review
  8. Give your policy a name. For example, you can name it ConnectClickToCall_Policy.
  9. Add a description.
  10. Click on Create policy.

3. IAM Role

Next Step creates an IAM Role. The IAM policy created in previous step is added to this role.

On the same IAM console, on the left-hand menu click on Roles:

  1. Click on Create role.
  2. Keep AWS Service selected in the options for Select Type of trusted entity.
  3. Select Lambda as option for Choose a use case.
  4. Click on the button Next: Permissions.
  5. In the filter policies, search for the policy name created in previous step.
  6. Check the box next to policy name.
  7. Search for AWSLambdaBasicExecutionRole and check the box next to this built-in policy.
  8. Click on Next: Tags Button.
  9. Click on Review Button.
  10. Give your Role a name. For example, you can name it ConnectClickToCall_Role.
  11. Add a description.
  12. Click on Create role.

4. AWS Lambda Function

This step will create the microservice that will respond to REST API call from mobile/web application. The code does preliminary validation checks, triage if it is a customer first or agent first experience and then make an API call into Amazon Connect. The microservice will also generate a random number for added layer of security.

In the AWS Management Console search for ‘Lambda’ and navigate to Lambda Console.

Note: confirm the AWS Region on the top right of the screen. As best practice, it should be same as your Amazon Connect instance.

  1. Click on Create Function.
  2. Keep Author from scratch checked.
  3. Give your Lambda Function a name. For example, you can name it ConnectClickToCall_LambdaFunction.
  4. In the runtime, choose Python 3.8.
    [sample Lambda code provided in this blog post has been tested against Python 3.8 runtime. You are responsible for code review as well keeping code updated with the latest Python runtime versions].
  5. Click on Change default execution role.
    1. Choose Use an existing role.
    2. Search for the role name created in previous step and select that.
  6. Keep the Advanced Settings as is.
  7. Click on Create function.
  8. In the Code Source, double-click on lambda_function.py file and replace the existing code with the code below: 
    # Copyright 2021 Amazon.com and its affiliates; all rights reserved. This file is Amazon Web Services Content and may not be duplicated or distributed without permission.
import boto3
import json
import os
import random
import logging

logger = logging.getLogger()
logger.setLevel(logging.INFO)

CALLER_ID = os.environ["CALLER_ID"]
CONNECT_INSTANCE_ID = os.environ["CONNECT_INSTANCE_ID"]
CONNECT_CONTACT_FLOW_ID = os.environ["CONNECT_CONTACT_FLOW_ID"]

connectClient = boto3.client('connect')


def lambda_handler(event, context):
  # Expected event format:
  #   {
    # "name": "<String>",
    # "phone": "<Phone number in E.164 format>",
    # "issue": "<String>",
    # "message": "<String>"
    # "preference": "<CustomerFirst or AgentFirst>"
  #   }

    # Checking Inputs
    logger.info(f"Event: {event}")
    logger.info(f"CALLER_ID: {CALLER_ID}")
    logger.info(f"CONNECT_INSTANCE_ID: {CONNECT_INSTANCE_ID}")
    logger.info(f"CONNECT_CONTACT_FLOW_ID: {CONNECT_CONTACT_FLOW_ID}")

    # Validation Checks
    checks = []
    checks.append('issue' in event)
    checks.append('name' in event)
    checks.append('phone' in event)
    checks.append('message' in event)
    checks.append('preference' in event)

    # Check for any errors in validation checks
    if False in checks:
        response = {
            "statusCode": 400,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps(
                {
                    "Status": "Success",
                    "Reason": "Input failed validation"
                }
            )
        }
    else:
        if event['preference'] == "CustomerFirst":
            connectClient.start_outbound_voice_contact(
                InstanceId=CONNECT_INSTANCE_ID,
                ContactFlowId=CONNECT_CONTACT_FLOW_ID,
                SourcePhoneNumber=CALLER_ID,
                DestinationPhoneNumber=event['phone'],  
                Attributes={
                    'CustomerName': event['name'],
                    'Issue': event['issue'],
                    'Description': event['message'],
                    'PhoneNumber': event['phone'],
                    'verificationCode': str(random.randrange(100, 999))

                }
            )
        
        response = {
            "statusCode": 200,
            "headers": {"Access-Control-Allow-Origin": "*"},
            "body": json.dumps(
                {"Status": "Success"}
            )
        }

        if event['preference'] == "AgentFirst":
            connectClient.start_task_contact(
                InstanceId=CONNECT_INSTANCE_ID,
                ContactFlowId=CONNECT_CONTACT_FLOW_ID,
                Name='Web Form Submission',
                Attributes={
                    'CustomerName': event['name'],
                    'Issue': event['issue'],
                    'Description': event['message'],
                    'CustomerPhoneNumber': event['phone'],
                    'Channel': 'Web Form Submission'
                },
                # References={
                #     'string': {
                #         'Value': 'https://aws.amazon.com/connect/',
                #         'Type': 'URL'
                #     }},
                Description=event['message']
            )
            
            response = {
                "statusCode": 200,
                "headers": {"Access-Control-Allow-Origin": "*"},
                "body": json.dumps(
                    {"Status": "Success"}
                )
            }

    return response
  9. Click on Deploy after replacing the code.
  10. In the menu bar, click on Configuration
    1. Select Environment Variables and Click on Edit
    2. Add Environment Variables for CALLER_ID, CONNECT_INSTANCE_ID and CONNECT_CONTACT_FLOW_ID. (You made note of these IDs in Contact Flow section).
    3. The Edit environment variables screen will look as follows. Note that all variables are in upper case. Click on Save button when done.
      Lambda Environment variables

5. API Gateway REST endpoint

This step will create a REST endpoint that can be called over the web. The incoming requests will be passed to the Lambda function created in previous step. Note that the API created as a result of these steps will be publicly accessible. You can check Securing API Gateway on how to restrict access to API in a production environment.

In the AWS Management Console search for ‘API Gateway’ and navigate to API Gateway Console by clicking on it.

Note: confirm the AWS Region on the top right of the screen. As best practice, it should be same as your Amazon Connect instance.

  1. Click on Create API
  2. Click on Build Button next to REST API
    (Public: Develop a REST API where you gain complete control over the request and response along with API management capabilities.)
  3. In Choose Protocol select REST
  4. Select New API in Create new API
  5. Give your API a name, description and Endpoint Type: Regional and Click on Create API
    create api
  6. In the Actions Drop Down, click on Create Method
  7. In the Method Box select POST and click on the check mark next to it.
  8. In the form on the right:
    1. Keep Integration Type as Lambda Function
    2. Check Mark Use Lambda Proxy Integration
    3. Select your Region where Lambda function and Amazon Connect Instance reside
    4. Select the Lambda Function Name created in previous step
      API to Lambda
  9. Click on Save Button
  10. In the Add Permission Dialog Box, Select OK. This gives the API Gateway endpoint to invoke Lambda Function on your behalf.
  11. In the Actions Drop Down, select Enable CORS
    1. And select replace existing CORS
  12. In the Actions Drop Down, click on Deploy API
    1. In the deployment stage, select new stage and give your stage a name and description. For example, you can use dev as the stage Name.
  13. Click on the stage Name and note down the Invoke URL.
    It will be in the format of:
    Invoke URL: https://xxxxxxxxxx.execute-api.us-west-2.amazonaws.com/stage
    Invoke URL

6. Website

In this step, you will create a website for testing Customer First and Agent First Click to Call Functionality.

  1. Download sample HTML file.
  2. Right Click the HTML file and open it in your favorite text/code editor:
    sample html file
  3. Update the value of the API_ENDPOINT variable with the with the Invoke URL value you made note of in previous steps (API Gateway endpoint).
  4. Save the file and close it.
  5. Right Click the File again and open it with your browser application:
    sample website

Testing

Update Routing Profile

Before we can test this application, you must validate that the user is set up with correct configuration in routing profile.

This application is making use of Amazon Connect Tasks for Agent First click to call experience. Therefore, we will update the agent routing profile to ensure that Amazon Connect Tasks are routable.

  1. In Amazon Connect Console, click on Users Icon and Select Routing Profile
  2. Update the routing profile you plan on using for testing.
  3. Check Task in Set Channels and concurrency
  4. Put Maximum Tasks as 1
  5. Check Task in Routing Profile Queues
  6. Save Routing Profile

Amazon Connect Routing profile

Simulating Click to Call

Log into Amazon Connect with the agent credentials set up with the routing profile you created/updated in previous section.

In the web page opened on your local machine fill in name, phone number, issue and a brief message.

1. Customer First

When you click on the Submit-Request Customer First button, a phone call is made to the phone number specified in the click to call form. When the customer picks up the phone, a personalized message informs them about the call. The customer is asked to enter a random number for security purposes. And then the call is transferred to the queue and can be picked up by the available agent.

2. Agent First

When you click on the Agent First Button , an Amazon Connect Task with all the information filled by customer is routed to the agent. Agent can preview the information and reach out to the customer by clicking on the phone number.

Agent Experience

Security

In this blog post, we have added a random number in the IVR for security purpose. Some other suggestions for making the solution more secure include:

  1. Captcha Tests in website
  2. Security in Amazon API Gateway
  3. Random Number Input for click to calls.

Clean Up

After you’re done trying the solution, to avoid additional charges go ahead and do the following:

If you used the AWS CloudFormation template to deploy the solution:

  • Delete the CloudFormation stack.
  • Manually empty and delete the S3Website bucket (deleting the stack won’t remove it from your account).
  • In Amazon Connect, unlink the Click-to-Call-Demo-Flow from your phone number.

If you followed the walkthrough:

  • Remove all created resources by deleting the Amazon API Gateway and AWS Lambda Function.
  • To delete an API in AWS API Gateway: Navigate to the API Gateway Console. Click on APIs. Click on radio button next to ‘API name’ to select API. Then click on ‘Actions’ drop down and click ‘Delete API’
  • To delete Lambda Function: Navigate to the AWS Lambda Console. Select ‘Functions’ and click on checkbox next to ‘Function name’ to select Lambda Function. Then click on ‘Actions’ drop down and click ‘Delete’

Finally, if you created an Amazon Connect instance for this blog, you can delete the Amazon Connect instance in the Amazon Connect service console.

Conclusion

This post demonstrated how you can enable click to call experience in your web applications and provide a seamless continuation of customer journey from web to contact center. Depending upon the business needs, this post demonstrated how you can create customer first or agent first click to call experiences. To learn more about Amazon Connect, visit the Amazon Connect Administrator Guide.

Sayed Hassan

Sayed Hassan

Sayed Hassan is Sr. Solutions Architect for Amazon Connect at AWS. He is passionate about creating effortless experiences for customers contacting customer services. He has helped transform contact centers across industries for more than a decade. He believes in keeping things simple for customers using data, Artificial Intelligence and Machine Learning to augment customer experiences, so they can get back to the things they love with least time and effort. In his free time you can find him glued to his Kindle, hiking, gardening, playing cricket or squash and spending time with his adorable kids.

Sam Castro

Sam Castro

Sam Castro is a Prototyping Architect at AWS. He is part of the Envision Engineering team, where he architects and builds innovative solutions for customers to demystify technology and shows them the art of the possible. In this spare time, he enjoys playing soccer and spending time with friends and family.