Add example for submitting form to launch chat and passing input as C…

…onnect attributes (#248)
amazon-connect · Nov 18, 2024 · b548a6b · b548a6b
1 parent 2ec638c
commit b548a6b
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 0 deletions.
diff --git a/hostedWidgetCustomization/README.md b/hostedWidgetCustomization/README.md
@@ -64,6 +64,11 @@ New to Amazon Connect Open Source? Follow the [open source walkthrough](https://
 
 ![](./customFloatingWidgetLaunchIcon/customFloatingWidgetLaunchIcon.gif)
 
+### Submit form to launch a new chat
+[formSubmitLaunchChat](./formSubmitLaunchChat): submit a form to launch a new chat and pass in values as contact attributes.
+
+![](./formSubmitLaunchChat/formSubmitLaunchChat.gif)
+
 ### Hyperlink support
 
 [hyperlinkSupportWidget](./hyperlinkSupportWidget): support a plain-text URL that launches the widget on page load.
@@ -81,3 +86,8 @@ New to Amazon Connect Open Source? Follow the [open source walkthrough](https://
 [launchChatBrowserWindow](./launchChatBrowserWindow): make the widget launch in a new browser window.
 
 ![](./launchChatBrowserWindow/launchChatBrowserWindow.gif)
+
+### Persistent chat
+[persistentChat](./persistentChat): resume previous conversations with the context, metadata, and transcripts.
+
+![](./persistentChat/persistentChat.gif)
diff --git a/hostedWidgetCustomization/formSubmitLaunchChat/README.md b/hostedWidgetCustomization/formSubmitLaunchChat/README.md
@@ -0,0 +1,56 @@
+# Submit form to launch a new chat
+
+Submit a form to launch a new chat and pass in values as contact attributes.
+
+This option allows you to launch a widget on form submission as well as pass values submitted to form as contact attributes.
+
+> Also refer to the Admin Guide documentation: https://docs.aws.amazon.com/connect/latest/adminguide/customize-widget-launch.html
+
+![](./formSubmitLaunchChat.gif)
+
+## Setup
+1. Create a form on your website:
+```html
+    <form id="chatForm" onsubmit="return submitForm()">
+        <input type="text" id="firstName" placeholder="Enter your first name" required>
+        <button id="launch-widget-btn" type="submit">Start Chat</button>
+    </form>
+```
+2. Host the snippet code on your website:
+```html
+     <!-- EXAMPLE SNIPPET - Edit all '<REPLACE_ME>' values -->
+    <script type="text/javascript">
+        function submitForm() {
+            (function (w, d, x, id) {
+                s = d.createElement('script');
+                s.src = 'https://<REPLACE_ME>.cloudfront.net/amazon-connect-chat-interface-client.js';
+                s.async = 1;
+                s.id = id;
+                d.getElementsByTagName('head')[0].appendChild(s);
+                w[x] = w[x] || function () { (w[x].ac = w[x].ac || []).push(arguments) };
+            })(window, document, 'amazon_connect', '<REPLACE_ME>' /* Connect Widget ID */);
+
+            amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456' } });
+            amazon_connect('snippetId', '<REPLACE_ME>' /* Connect Widget Snippet ID */);
+            amazon_connect('supportedMessagingContentTypes', ['text/plain', 'text/markdown']);
+
+            const customerName = document.getElementById('firstName').value;
+
+            // Pass customer name as contact attribute
+            amazon_connect('contactAttributes', {
+                customer_name: customerName
+            });
+
+            amazon_connect('customerDisplayName', function (callback) {
+                callback(customerName);
+            });
+
+            amazon_connect("customLaunchBehavior", {
+                skipIconButtonAndAutoLaunch: true,
+            });
+
+            //Make the page doesn't refresh on form submission
+            return false;
+        };
+    </script>
+```
diff --git a/hostedWidgetCustomization/formSubmitLaunchChat/formSubmitLaunchChat.gif b/hostedWidgetCustomization/formSubmitLaunchChat/formSubmitLaunchChat.gif
diff --git a/hostedWidgetCustomization/formSubmitLaunchChat/index.html b/hostedWidgetCustomization/formSubmitLaunchChat/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start Amazon Connect Chat</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+
+        form {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        input,
+        button {
+            display: block;
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: #123456;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #0e2a47;
+        }
+    </style>
+</head>
+
+<body>
+    <form id="chatForm" onsubmit="return submitForm()">
+        <input type="text" id="firstName" placeholder="Enter your first name" required>
+        <button id="launch-widget-btn" type="submit">Start Chat</button>
+    </form>
+
+     <!-- EXAMPLE SNIPPET - Edit all '<REPLACE_ME>' values -->
+    <script type="text/javascript">
+        function submitForm() {
+            (function (w, d, x, id) {
+                s = d.createElement('script');
+                s.src = 'https://<REPLACE_ME>.cloudfront.net/amazon-connect-chat-interface-client.js';
+                s.async = 1;
+                s.id = id;
+                d.getElementsByTagName('head')[0].appendChild(s);
+                w[x] = w[x] || function () { (w[x].ac = w[x].ac || []).push(arguments) };
+            })(window, document, 'amazon_connect', '<REPLACE_ME>' /* Connect Widget ID */);
+
+            amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456' } });
+            amazon_connect('snippetId', '<REPLACE_ME>' /* Connect Widget Snippet ID */);
+            amazon_connect('supportedMessagingContentTypes', ['text/plain', 'text/markdown']);
+
+            const customerName = document.getElementById('firstName').value;
+
+            // Pass customer name as contact attribute
+            amazon_connect('contactAttributes', {
+                customer_name: customerName
+            });
+
+            amazon_connect('customerDisplayName', function (callback) {
+                callback(customerName);
+            });
+
+            amazon_connect("customLaunchBehavior", {
+                skipIconButtonAndAutoLaunch: true,
+            });
+
+            //Make the page doesn't refresh on form submission
+            return false;
+        };
+
+    </script>
+</body>
+
+</html>
diff --git a/...getCustomization/PersistentChat/README.md → ...getCustomization/persistentChat/README.md b/...getCustomization/PersistentChat/README.md → ...getCustomization/persistentChat/README.md
diff --git a/...etCustomization/PersistentChat/index.html → ...etCustomization/persistentChat/index.html b/...etCustomization/PersistentChat/index.html → ...etCustomization/persistentChat/index.html
diff --git a/...ization/PersistentChat/persistentChat.gif → ...ization/persistentChat/persistentChat.gif b/...ization/PersistentChat/persistentChat.gif → ...ization/persistentChat/persistentChat.gif
diff --git a/...etCustomization/PersistentChat/styles.css → ...etCustomization/persistentChat/styles.css b/...etCustomization/PersistentChat/styles.css → ...etCustomization/persistentChat/styles.css