amazon-connect · spenlep-amzn · Mar 5, 2024
@@ -10,6 +10,7 @@
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
 
+    <script type="text/javascript" src="js/backendEndpoints.js"></script>
     <script type="text/javascript" src="js/amazon-connect-chat-min.js"></script>
 </head>
 
@@ -53,7 +54,7 @@ <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
 
     <script>
         connect.ChatSession.setGlobalConfig({
-            region: "" // TODO: Fill in with your region, such as 'us-west-2'
+            region: region, // set in "backendEndpoints.js"
         });
 
         var session;
@@ -84,9 +85,7 @@ <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
                 if (!customerName) {
                     alert('you must enter a name');
                 } else {
-                    var contactFlowId = ""; // TODO: Fill in. You can find the contact flow id when viewing a contact flow. For example, if the arn for your flow is 'arn:aws:connect:us-west-2:123456789012:instance/11111111-1111-1111-1111-111111111111/contact-flow/22222222-2222-2222-2222-222222222222', the contact flow id is '22222222-2222-2222-2222-222222222222'
-                    var instanceId = ""; // TODO: Fill in You can find the instance id when viewing a contact flow. For example, if the arn for your flow is 'arn:aws:connect:us-west-2:123456789012:instance/11111111-1111-1111-1111-111111111111/contact-flow/22222222-2222-2222-2222-222222222222', the instance id is '11111111-1111-1111-1111-111111111111'
-                    var apiGatewayEndpoint = ""; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template. It should look like this: https://${apiId}.execute-api.${region}.amazonaws.com/Prod
+                    var attachmentsFeatureEnabled = false; // Prerequisite: https://docs.aws.amazon.com/connect/latest/adminguide/enable-attachments.html
 
                     console.log("this is the first name:" + customerName);
                     document.getElementById("contactDetails").reset();
@@ -95,16 +94,16 @@ <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
                         ParticipantDetails: {
                             DisplayName: customerName
                         },
-                        ContactFlowId: contactFlowId,
-                        InstanceId: instanceId,
+                        ContactFlowId: contactFlowId, // set in "backendEndpoints.js"
+                        InstanceId: instanceId, // set in "backendEndpoints.js"
                         // Enable rich messaging support: https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html
                         SupportedMessagingContentTypes: ["text/plain", "text/markdown"], // include 'text/markdown',
                         // Set optional chat duration: https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-ChatDurationInMinutes
                         ChatDurationInMinutes: 1500, // min 60, max 10080 - default 1500 (25 hours)
                     };
 
                     $.ajax({
-                        url: apiGatewayEndpoint,
+                        url: apiGatewayEndpoint, // set in "backendEndpoints.js"
                         type: "POST",
                         async: false,
                         data: JSON.stringify(initiateChatRequest),

@@ -0,0 +1,15 @@
+/**
+ * UPDATE ME - add endpoints after deploying the CFN template
+ *
+ * CloudFormation Template: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI
+ * 
+ * Prerequisites:
+ *  - Amazon Connect Instance: https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-instances.html
+ *  - InstanceId: https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html
+ *  - ContactFlowId: https://docs.aws.amazon.com/connect/latest/adminguide/find-contact-flow-id.html
+ */
+
+var contactFlowId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var instanceId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var apiGatewayEndpoint = "https://<api-id>.execute-api.<region>.amazonaws.com/Prod/"; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template
+var region = "<region>"; // TODO: Fill in
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
+    <script type="text/javascript" src="js/backendEndpoints.js"></script>
     <script src="js/amazon-connect-chat-interface.js"></script>
 </head>
 
@@ -64,24 +65,22 @@ <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
                     alert('you must enter a name & username');
                     document.getElementById("contactDetails").reset();
                 } else {
-                    var contactFlowId = ""; // TODO: Fill in
-                    var instanceId = ""; // TODO: Fill in
-                    var apiGatewayEndpoint = ""; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template
-                    var enableAttachments = false // TODO: Fill in if you want to enable attachments on Amazon Connect chat widget (PRE-REQUISITE: Enable Amazon Connect instance for attachments)
+                    var attachmentsFeatureEnabled = false; // Prerequisite: https://docs.aws.amazon.com/connect/latest/adminguide/enable-attachments.html
+
                     console.log("this is the first name:" + customerName);
                     document.getElementById("contactDetails").reset();
 
                     connect.ChatInterface.initiateChat({
                         name: customerName,
-                        region: "", // TODO: Fill in
-                        apiGatewayEndpoint: apiGatewayEndpoint,
+                        region: region, // set in "backendEndpoints.js"
+                        apiGatewayEndpoint: apiGatewayEndpoint, // set in "backendEndpoints.js"
                         contactAttributes: JSON.stringify({
                             "customerName": customerName
                         }),
-                        contactFlowId: contactFlowId,
-                        instanceId: instanceId,
+                        contactFlowId: contactFlowId, // set in "backendEndpoints.js"
+                        instanceId: instanceId, // set in "backendEndpoints.js"
                         featurePermissions: {
-                            "ATTACHMENTS": enableAttachments, // this is the override flag from user for attachments
+                            "ATTACHMENTS": attachmentsFeatureEnabled, // this is the override flag from user for attachments
                             "MESSAGING_MARKDOWN": true // enable rich messaging toolbar and text formatting
                         },
                         // Set optional chat duration: https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-ChatDurationInMinutes

@@ -8,6 +8,8 @@
 
     <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+    <script type="text/javascript" src="js/backendEndpoints.js"></script>
 </head>
 
 <body>
@@ -258,7 +260,8 @@ <h2 class="welcome-text">Chat Demo</h2>
             $(function() {
                 $('#contactDetails').submit(function(e) {
                     e.preventDefault();
-                    var enableAttachments = "${enableAttachments}";
+                    var attachmentsFeatureEnabled = false; // Prerequisite: https://docs.aws.amazon.com/connect/latest/adminguide/enable-attachments.html
+
                     var customerName = $('#firstName').val();
                     var username = $('#username').val();
                     if (!customerName || !username) {
@@ -272,15 +275,15 @@ <h2 class="welcome-text">Chat Demo</h2>
                         connect.ChatInterface.initiateChat({
                             name: customerName,
                             username: username,
-                            region: "${region}",
-                            apiGatewayEndpoint: "https://${apiId}.execute-api.${region}.amazonaws.com/Prod",
+                            region: region, // set it "backendEndpoints.js"
+                            apiGatewayEndpoint: apiGatewayEndpoint, // set it "backendEndpoints.js"
                             contactAttributes: JSON.stringify({
                                 "customerName": customerName
                             }),
-                            contactFlowId: "${contactFlowId}",
-                            instanceId: "${instanceId}",
+                            contactFlowId: contactFlowId, // set in "backendEndpoints.js"
+                            instanceId: instanceId, // set in "backendEndpoints.js"
                             featurePermissions: {
-                                "ATTACHMENTS": enableAttachments === 'true', // this is the override flag from user for attachments
+                                "ATTACHMENTS": attachmentsFeatureEnabled,
                                 "MESSAGING_MARKDOWN": true // enable rich messaging toolbar and text formatting
                             },
                             supportedMessagingContentTypes: "text/plain,text/markdown", // include 'text/markdown' for rich messaging support

@@ -0,0 +1,15 @@
+/**
+ * UPDATE ME - add endpoints after deploying the CFN template
+ *
+ * CloudFormation Template: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI
+ * 
+ * Prerequisites:
+ *  - Amazon Connect Instance: https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-instances.html
+ *  - InstanceId: https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html
+ *  - ContactFlowId: https://docs.aws.amazon.com/connect/latest/adminguide/find-contact-flow-id.html
+ */
+
+var contactFlowId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var instanceId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var apiGatewayEndpoint = "https://<api-id>.execute-api.<region>.amazonaws.com/Prod/"; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template
+var region = "<region>"; // TODO: Fill in
@@ -0,0 +1,15 @@
+/**
+ * UPDATE ME - add endpoints after deploying the CFN template
+ *
+ * CloudFormation Template: https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI
+ * 
+ * Prerequisites:
+ *  - Amazon Connect Instance: https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-instances.html
+ *  - InstanceId: https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html
+ *  - ContactFlowId: https://docs.aws.amazon.com/connect/latest/adminguide/find-contact-flow-id.html
+ */
+
+var contactFlowId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var instanceId = "12345678-1234-1234-1234-123456789012"; // TODO: Fill in
+var apiGatewayEndpoint = "https://<api-id>.execute-api.<region>.amazonaws.com/Prod/"; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template
+var region = "<region>"; // TODO: Fill in
@@ -10,19 +10,22 @@
 
 <body>
     <div id="root"></div>
+    <script type="text/javascript" src="backendEndpoints.js"></script>
     <script src="amazon-connect-chat-interface.js"></script>
     <script src="ACChat.js"></script>
     <script>
+        var attachmentsFeatureEnabled = false; // Prerequisite: https://docs.aws.amazon.com/connect/latest/adminguide/enable-attachments.html
+
         AmazonCustomChatWidget.ChatInterface.init({
             containerId: 'root',
             initiationIcon: 'icon', // Set either 'icon' or 'button'
-            region: "us-west-2",
+            region: region, // set in "backendEndpoints.js"
             name: "refer|inputFields|Name", // **** Mandatory**** For chat without form, please add a constant or a variable. Otherwise, if you have a chat form, then you can refer it to the input fields like "refer|inputFields|Name"
             username: "refer|inputFields|UserName", // **** Mandatory**** For chat without form, please add a constant or a variable. Otherwise, if you have a chat form, then you can refer it to the input fields like "refer|inputFields|UserName"
-            apiGateway: "https://${apiId}.execute-api.${region}.amazonaws.com/Prod", // **** Mandatory Provide the api gateway ARN from installing the async chat cloudformation as explained in the readme document.
-            contactFlowId: 'XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX', // This is the contact flow ID and not the full ARN of that contact Flow, please check README.md for more information.
-            instanceId: 'XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX', // This is the connect instance ID and not the full ARN of that contact Flow, please check README.md for more information.
-            attachments: true,
+            apiGateway: apiGatewayEndpoint, // set it "backendEndpoints.js"
+            contactFlowId: contactFlowId, // set in "backendEndpoints.js"
+            instanceId: instanceId, // set in "backendEndpoints.js"
+            attachments: attachmentsFeatureEnabled,
             contactAttr: {
                 SomeContactAttributeKey: "SomeContactAttributeValue",
             },