Reaching More Customers with Web and Mobile Chat on Amazon Connect

We just launched an exciting new channel for Amazon Connect: chat. Today, we wanted to dive a bit deeper into what chat is and how it works in Amazon Connect. We built Amazon Connect from the ground up to be truly omnichannel, which means we provide a seamless experience across voice and chat for your customers, contact center supervisors, and agents.

Why chat? Consumers grow more technologically savvy every day and chat, text messaging, and even in-app messaging are becoming essential channels for businesses to reach their customers. From aviation to e-commerce, chat is now a standard channel for support and sales. Chat allows your customers to flow from synchronous to asynchronous communication as needed, on their own time, and at their own pace. Adding chat to your contact center should be table stakes, and that’s what we set out to accomplish with Amazon Connect.

With Amazon Connect’s omnichannel foundation, you can use the same constructs you’re already familiar with, like queues, routing profiles, contact flows, and metrics to build rich and differentiated contact center experiences. The same contact flows you built for your voice-powered contact centers, already work for chat. The conversation context and transcript can be shared across agents and channels, giving your customers the freedom to move seamlessly between devices without forcing them to start all over again.

Customers can easily add Amazon Connect chat to their website by leveraging our open source SDKs and sample implementations. With a few lines of code, you can easily add a chat widget to your existing website or mobile app. You can also experiment with chat right in the Amazon Connect console.

Amazon Connect chat continues to integrate with the same broad set AWS tools and infrastructure as Amazon Connect voice. Your transcripts can be persisted to Amazon Simple Storage Service (Amazon S3) and you can stream contact trace records (CTRs) to Amazon Kinesis Data Streams to enable contact center analytics.

If you want to learn more, consider watching my colleague Yasser’s introduction on YouTube or attending a webinar.

The remainder of this post will walk through the technical details of setting up and running chat in Amazon Connect. At the end, we’ll dive a bit deeper and cover what’s happening in the background.

Enabling Chat

Chat is enabled by default on newly created Amazon Connect instances, but you’ll have to make a few small changes to enable chat on existing instances. If you’re following along by creating a new instance, feel free to skip ahead.

If you want to enable chat on your existing instances you’ll need to make sure it’s enabled in the routing profiles, and security profiles you want to use with chat. If you want to persist chat transcripts, you’ll also want to enable that in the AWS Console by specifying an S3 bucket and a KMS Encryption Key. You can find complete instructions for each of these steps on github.

With these steps completed, we’re ready to start testing chat!

Testing Chat

To make it easy for customers to quickly test the chat experience as an end-customer and an agent, we have created a test console that you can access from your dashboard by clicking Test Chat or by navigating directly to this URL after adding in your instance name: https://<YOUR_INSTANCE>.awsapps.com/connect/test-chat. A small note here that instances created prior October 12, 2018, won’t have this enabled, but you can still test chat by following the instructions for deploying chat on your website.

In the middle of the screen, we have an example user interface that mimics what you might have on your website or mobile app. On the right-hand side, we’ve embedded the updated Contact Control Panel (CCP), which agents use to handle voice or chat contacts.

From the test interface, you can click Test Settings near the top left and pick a contact flow to test the chat experience. You can even pass in contact attributes to simulate the customer experience as if it were running directly from your website or app.

Here I’ve selected the updated sample inbound flow, available on new Amazon Connect instances. Which looks like this:

In this updated sample inbound flow, we are checking one of the System attributes of the contact to see if the customer is communicating with us via chat and then driving the conversation slightly differently if that’s the case. If you have an existing instance, you can update your sample flow or download and import the flows from GitHub, which I’ll demonstrate later.

Here is an example of chat running in the test console:

From this test console, you can try out edits to your contact flows or your Amazon Lex chatbots and see how those changes impact the chat experience in real-time – no coding required.

Your agents can access chat through the updated Contact Control Panel (CCP) available at https://<YOUR_INSTANCE>.awsapps.com/connect/ccp-v2.

While your existing contact flows will work for chat, you can also add channel-specific enhancements with the new Wait and Set disconnect flow action blocks. Many of the other action blocks have been updated to support chat, as well.

Now that we understand how to test chat, let’s walk through how you can add chat to your website.

Deploying Chat On Your Website

My colleague Erin created an example chat implementation that you can launch with AWS CloudFormation. You can access the example on github.

This template will provision an Amazon API Gateway endpoint that invokes an AWS Lambda function which initiates a chat. The API Gateway endpoint is called from a static webpage deployed to Amazon S3 and accessed through Amazon CloudFront. The README on github has detailed instructions but let’s launch it and see for ourselves!

Before we can launch the stack we need to import the two contact flows from the github repository to our instance. The instructions for this are outlined in the README but I’ve included a quick screen recording below as well:

With those contact flows imported we can go to the github page and click the Launch Stack button for our AWS region.

To launch this stack we’ll need our Instance ID and our Contact Flow Id. We can grab those from the contact flow information as pictured below. You don’t need to grab the full ARN here, but just the Instance Id and Contact Flow Id.

Next, we fill in the parameters and launch the stack! Remember to use a unique bucket name!

Most of the resources deploy within minutes, but CloudFront is a global CDN, and it can take up to an hour to become available. Once the deployment is complete, we can find the URL in the output of the stack on the CloudFormation console.

If you’re getting a 403 error, it could be that CloudFront isn’t quite ready yet. Grab a coffee and check again in a bit.

Building Your Own Widget

Some customers want to custom-build their chat widget to integrate into existing apps and customize the chat experience. To do this they can take advantage of our open source ChatJS library here: https://github.com/amazon-connect/amazon-connect-chatjs. Erin also built a sample implementation with a custom chat widget that you can find on github.

The CloudFormation template will deploy an API Gateway endpoint and Lambda function for initiating a chat from your webpage, similar to the previous example. From there, you can use the ChatJS library to build a custom widget.

With the ChatJS library and the updated Amazon Connect Streams API, customers can build custom agent experiences as well.

Chat Deep Dive

Now that you’ve seen how you can deploy chat, let’s cover what’s going on in the background.

With the release of chat we’ve added a new API call to Connect called StartChatContact. This API call takes an InstanceID, ContactFlowID, and some other parameters and it returns a set of credentials you can use with the new connectparticipant API. You are essentially using your AWS IAM credentials to sign the StartChatContact request which provisions a token for calling the new Connect Participant API.

The Connect Participant API provides a CreateParticipantConnection call, which with your token from StartChatContact allows you to create a websocket connection and credentials for chat.

The sequence diagram below outlines the flow of credentials to establish a chat connection:

Once a websocket URL is requested, a client must connect within 100 seconds or the URL expires. You can also use the participant API to send events and messages. This is how you might create a chat connection in python:

import boto3

connect = boto3.client("connect")
chat = boto3.client("connectparticipant")

response = connect.start_chat_contact(
    InstanceId='9ec07d71-e58c-45de-a3f6-8eb3cfef8439',
    ContactFlowId='e6e2a263-0007-4b97-a45c-31a5219a1c9c',
    ParticipantDetails={
        'DisplayName': 'Randall'
    }
)

chat_response = chat.create_participant_connection(
    Type=['WEBSOCKET'],
    ParticipantToken=response['ParticipantToken']
)

The chat_response will contain a payload like this:

{'Websocket': {'Url': 'wss://tufsuyburufn.transport.connect.us-west-2.amazonaws.com/?AuthToken=LONGSTRINGHERE', 'ConnectionExpiry': '2019-11-21T09:10:36.372Z'}}

You can then use that TLS 1.2 secured websocket connection to listen for events in the chat conversation. Before you receive chat events you must send a subscription request through the websocket. You could do this in python with the websockets library like this:

import websockets
with websockets.connect(chat_response['wss']) as ws:
    ws.send('{"topic":"aws/subscribe","content":{"topics":["aws/chat"]}}')

You can call chat.send_event and chat.send_message to send events and messages to the connect participant REST API with the ConnectionToken returned from create_participant_connection.

Using these APIs you can build a completely custom chat experience in any programming language. This means you get to decide when and how to offer chat to your customers. You can build in application-specific functionality and enable robust connections by decoupling chat state from connection state. This means users can roam across devices and browsers while maintaining the same conversation context.

Unlocking Dynamic Customer Experiences

Chat, like all the features of Amazon Connect, is designed to grow with your business. You can start simply with the sample implementations and customize the experience as you grow.

Amazon Connect chat makes it easy for businesses of all sizes to deliver dynamic and personal customer service experiences that feel as familiar as messaging with a friend. Again, if you want to learn more check out the documentation, Yasser’s YouTube video, the product page, or even join a webinar.

We have a lot of additional content to share over the next few weeks, and we’re excited to see what experiences this feature unlocks for customers, and we welcome any feedback on the product in the comments below.

– Randall