Fully customize the chat interface UI for your website, add a form to collect user info, and customize how the widget is rendered. Host and manage the bundle file yourself, importing it with a <script src="amazon-connect-chat-interface.js"></script> tag. Also refer to the Custom Chat Widget Example code.
NOTE: This approach requires a proxy to invoke the Amazon Connect Public StartChatContact API. Refer to the startChatContactAPI CloudFormation Template to deploy an API Gateway proxy solution.
- StartChatConact Proxy API Template
- Custom Widget Example Code
- Amazon Connect Open Source Documentation
- Amazon Connect Chat Experience Admin Guide
- ChatJS Source Code
-
Create an Amazon Connect Instance [guide]
- OR: enable chat experience for an existing Connect instance. [guide]
-
Create an Amazon Connect Contact Flow, ready to receive chat contacts. [guide]
- Note the
instanceId[guide] - Find the
contactFlowIdfor the "Sample Inbound Flow (First Contact)" [guide]
- Note the
-
Deploy a custom Amazon Connect Chat backend. Refer to this backend template
- Deploy a StartChatContact template Lambda [CloudFormation Template]
- Add the
region,API_GATEWAY_ID,contactFlowId, andinstanceIdtoendpoints.js.
Importing the bundle file into your project allows you to invoke the global connect methods after placing a ChatInterface object on the window. To initiate the chat, you can invoke initiateChat() and pass in some details about your Connect instance and the requesting user.
<html>
<head>
<title>Amazon Connect Chat Interface Local Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="amazon-connect-chat-interface.js"></script>
</head>
<body>
<div>
<h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
<button id="startChatBtn">Launch Chat</button>
<section class="section-chat" id="section-chat" style="float: right; width: 50%;">
<div id="root"></div>
</section>
</div>
<script>
// CONFIGURATION
var rootElemId = 'root'; // This is the id of the container where you want the widget to reside
var customerName = 'Satoshi'; // can also be submitted in a form
// BACKEND ENDPOINTS
var apiGatewayEndpoint = `https://asdfasdf.execute-api.us-west-2.amazonaws.com/Prod/`; // REPLACE ME
var region = 'us-west-2' // REPLACE ME
var contactFlowId = '7d67abd3-06ae-4170-9d3b-7b5031caf208'; // REPLACE ME
var instanceId = '3203af10-3e0d-4d59-9452-6543250cf7f6'; // REPLACE ME
(function () {
// Initialize the chat widget
connect.ChatInterface.init({
containerId: rootElemId // This is the id of the container where you want the widget to reside
});
document.getElementById('startChatBtn').addEventListener('click', function (e) {
e.preventDefault();
// Launch a chat
connect.ChatInterface.initiateChat({
name: customerName,
region,
apiGatewayEndpoint,
contactFlowId,
instanceId,
contactAttributes: JSON.stringify({
"customerName": customerName
}),
featurePermissions: {
"ATTACHMENTS": false, // this is the override flag from user for attachments
},
supportedMessagingContentTypes: "text/plain,text/markdown", // enable rich messaging
}, successHandler, failureHandler);
});
})();
function successHandler(chatSession) {
console.log("success!");
}
function failureHandler(error) {
console.log("There was an error: ");
console.log(error);
}
</script>
</body>
</html>