Enable chat in Salesforce Experience Cloud with Amazon Connect

Chat is becoming a preferred channel for customer interactions. Salesforce Experience Cloud (SEC) helps companies create websites, storefronts, and mobile apps. SEC can personalize customer engagement with pre-built templates. It offers self-service capabilities, and integrates with customer relationship management (CRM) solutions.

Adding Amazon Connect chat to SEC allows you to experience high-quality digital interactions. SEC native integration with Salesforce allows, agents can ask relevant questions, and provide specific information. You can self-serve with a bot, or escalate to an agent for non-trivial tasks. For example, a customer shopping online can chat with a contact center representative, or with an automation bot.

In this blog post, you will learn how to enable Amazon Connect chat experience in SEC.

Prerequisites

To follow along with the solution in this blog post, you must understand the following AWS services:

Amazon Connect
Amazon API Gateway
AWS Lambda
An active AWS account and Amazon Connect instance
A Salesforce developer account with the digital experience
Salesforce CLI installation to import data

Solution overview

Customer experience flow consists of the following steps:

A customer browses a website on SEC with Amazon Connect chat lightning component.
The customer chooses a chat widget to seek assistance.
The web browser initiates a chat request to Amazon API Gateway.
Amazon API Gateway invokes a Lambda function to start a chat session between the web browser and Amazon Connect.
Customer connects to an agent (or a bot) for assistance.

Setting up the solution

These instructions assume a working knowledge of Amazon Connect, AWS CloudFormation, and Salesforce Experience Cloud. For details on how to perform basic administration tasks with these services, see the following:

Step 1: Importing and configuring the contact flow

Download a pre-built contact flow.
Navigate to Routing tab within your Amazon Connect instance.
Choose Contact flows.
Choose Create contact flow button at the top-right.
Select drop down next to Save, choose Import flow at the top right.
Choose Select, and select the BasicChat file from step1.
Save and publish your contact flow.
Choose Show additional flow information to view ARN for this contact flow.
If the ARN for your contact flow is arn:aws:connect:us-west-2:123456789012:instance/11111111-1111-1111-1111-111111111111/contact-flow/22222222-2222-2222-2222-222222222222, the instanceId is 11111111-1111-1111-1111-111111111111, and contactFlowId is 22222222-2222-2222-2222-222222222222. Note instanceId and contactFlowId for later use with Salesforce.

Step 2: Creating test users

1. 1. Navigate to the Users tab within your Amazon Connect instance.
  2. Choose User management.
  3. Choose Add new users at the top right.
  4. Choose Next.
1. For Login name, enter agent1.
2. For Routing Profile, choose Basic Routing Profile.
3. For Security Profiles, choose Agent.
4. For other fields, enter values of your choice.
5. Choose Save.
6. Choose Create users.
Step 3: Deploying API Gateway and Lambda function

The AWS CloudFormation template creates an API Gateway endpoint and a Lambda function.
1. 1. Log in to your AWS Management Console.
  2. Launch the CloudFormation template
  3. On the ‘Create stack’ screen, choose Next.
  4. In the Parameters section, enter values for contactFlowId and instanceId. These are added as environment variables to the Lambda function.
1. After launching AWS resources, navigate to API Gateway in AWS Management Console.
2. Click StartChatContact API, and note the API Invoke URL. This is required to configure chat component on SEC.

Step 4: Setting up Salesforce Digital Experience

1. 1. Log in to your Salesforce instance, and choose Setup.
  2. Search for Digital Experiences, select Digital Experiences.
  3. Select Enable Digital Experiences.
  4. Provide a domain name, select Check Availability to confirm that the domain is available.
  5. Select Save.
1. Select OK on the next screen to add Digital Experiences, and register the domain name.
Step 5: Setting up Salesforce command line interface (CLI)
1. 1. Download Amazon Connect chat lightning component.
  2. Unzip the downloaded sf-amazon-chat.zip.
  3. Navigate to folder sf-amazon-chat in the unzipped directory.
  4. Open a terminal window or a command prompt.
  5. Set an ALIASNAME, this example uses blogchat as the ALIASNAME.
sfdx force:alias:set ALIASNAME=Salesforce username/email
1. 1. Next command launches a browser, and prompts for Salesforce credentials.
sfdx force:auth:web:login -r https://login.salesforce.com -a ALIASNAME
1. 1. After login, select Allow on the next screen to give Salesforce CLI permission.
1. 1. Terminal window shows a confirmation.
1. 1. Creating a Salesforce metadata file from the downloaded source code.
sfdx force:source:convert -r force-app -d mdapioutput
1. 1. Deploying Salesforce metadata file to Salesforce instance.
sfdx force:mdapi:deploy -u ALIASNAME -d mdapioutput/ -w 100

Step 6: Creating a website in Salesforce and configuring Amazon Connect chat
1. 1. Log in to Salesforce organization, and navigate to Digital Experiences configured in step 4.
  2. Select New, and follow the wizard to create a new site.
1. 1. Once the wizard completes, a new site is displayed. Template used in this blog is Customer Service.
  2. Select Builder to start configuring Amazon Connect chat lightning component. Chrome browser is recommended for Salesforce configuration.
1. 1. Select the lightning icon.
1. 1. Type AC Chat in the search bar.
1. 1. Drag the AC Chat Service component to the footer section of Digital Experiences site. If Something went wrong message is displayed, select the widget in the footer.
  2. AC Chat Service window opens, fill out the information.
    - Amazon Connect Instance Id: Instance Id for your Amazon Connect
    - Contact flow Id: Contact flow Id for the BasicChat flow you imported and published
    - API Gateway: HTTPS URL for Start Chat API
    - Chat Icon: Options available are icon or button
    - Chat Widget Color: Color choice for chat window and icon/button
    - Chat Form: Set to true, to display the form to collect name and email address.
  3. Chat Title: Title on the chat window.
1. Chat icon or button will display at the bottom right of the page.
Step 7: Configuring Content Security Policy (CSP) on Salesforce organization
1. 1. Open a browser window to Salesforce organization
  2. Go to Setup, search for CSP, select New, and configure three URLs to add to the allow list.
  3. Select New Trusted Site
  4. First, configure API Gateway URL.
    - General Information
      - Trusted Site Name: AmazonConnectChatAPIGateway
      - Trusted Site URL: https://*.execute-api.us-east-1.amazonaws.com, update Region based on your deployment
      - Active: Checked
      - Context: All
    - CSP Directives, check all directives, select Save and New.
  5. Next, configure Chat Participant URL.
    - General Information
      - Trusted Site Name: AmazonConnectChatParticipant
      - Trusted Site URL: https://participant.connect.us-east-1.amazonaws.com, update Region based on your deployment
      - Active: Checked
      - Context: All
    - CSP Directives, check all directives, select Save and New.
1. 1. And lastly, configure Web Socket URL.
    - General Information
      - Trusted Site Name: AmazonConnectChatWebSocket
      - Trusted Site URL: wss://*.transport.connect.us-east-1.amazonaws.com, update Region based on your deployment.
      - Active: Checked
      - Context: All
    - CSP Directives, check all directives, select Save
.

Testing the solution
1. 1. 1. In Salesforce, navigate to Builder.
    2. Select Preview on the top right.
  1. 1. Click on the chat widget, and enter your Name and Email.
    2. Select Submit.
  Clean Up
  
  To avoid incurring future charges, remove all the resources you created by deleting the CloudFormation stack.
  
  Conclusion
  
  In this post, we implemented a solution that integrates SEC with Amazon Connect chat by performing the following:
  - Deployed the CloudFormation for Start Chat API to create an API Gateway and AWS Lambda
  - Configured Salesforce CLI and pushed an Amazon Connect chat widget as a Salesforce Lightning Component
  - Configured AC Chat Service Lightning Component
  This is a basic demonstration. You can enhance the solution based on your organization’s requirements.
  
  With Amazon Connect, you pay for what you use. There are no upfront payments, long-term commitments, or minimum monthly fees. The price metrics are detailed on Amazon Connect pricing.
  
  Should you need help with setting this up, you can get assistance from AWS Professional Services. You can also seek assistance from Amazon Connect partners available worldwide.