create Hosted Widget customization examples (#148)

amazon-connect · Oct 17, 2023 · 7df1542 · 7df1542
1 parent 9fab9e0
commit 7df1542
Show file tree

Hide file tree

Showing 28 changed files with 1,685 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.2] - 2023-10-10
+### Added
+ - [Hosted Widget Customization](./hostedwidgetCustomization/README.md) examples for Amazon Connect. Additional ways to integrate the communications widget directly into your website and personalize the branding.
+
 ## [1.4.1] - 2023-6-19
 ### Changed
  - [Custom Chat Widget + cloudformationTemplates] - updated chat interface bundle file for additional interactive messages feature

diff --git a/README.md b/README.md
@@ -24,6 +24,9 @@ At the moment, these are the solutions in this repo:
 6. **[startChatContactAPILocalProxy](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/startChatContactAPILocalProxy)**
    Solution to run local proxy server for the Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) Public API. Can be used during local development when building a custom chat interface, prior to deploying a production CloudFormation chat backend.
 
+6. **[hostedWidgetCustomization](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/hostedWidgetCustomization)**
+   Additional ways to configure the Amazon Connect Hosted Widget on your website and further personalize the branding. This sample code covers several common use cases for customizing the widget snippet code. [Learn more](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html)
+
 ## Resources
 
 Here are a few resources to help you implement chat in your contact center:

diff --git a/hostedWidgetCustomization/README.md b/hostedWidgetCustomization/README.md
@@ -0,0 +1,83 @@
+# Hosted Widget Customizations
+
+Additional ways to configure the Amazon Connect Hosted Widget on your website and further personalize the branding.
+
+View the following sample code for customizing the widget. Follow the ["Admin Guide: Add chat to your website"](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html) to get started, and replace the example snippets with your generated `<script>` code.
+
+```html
+<!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
+<script type="text/javascript">
+  (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>");
+  amazon_connect("styles", {
+    openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+    closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+  });
+  // ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
+  amazon_connect("snippetId", "<REPLACE_ME>");
+  amazon_connect("supportedMessagingContentTypes", [
+    "text/plain",
+    "text/markdown",
+  ]);
+  // ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
+  amazon_connect('customerDisplayName', function(callback) {
+    const displayName = '<REPLACE_ME>';
+    callback(displayName);
+  });
+</script>
+```
+
+## Prerequisites
+
+Looking to add the Amazon Connect Widget to your website? Follow the [Admin Guide documentation](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html)
+
+New to Amazon Connect Open Source? Follow the [open source walkthrough](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/blob/master/.github/docs/AmazonConnectChatOpenSourceWalkthrough.md)
+
+## Examples
+
+### Basic setup
+
+[basicWidgetSetup](./basicWidgetSetup): render Amazon Connect widget button in the lower-right corner of your website.
+
+![](./basicWidgetSetup/basicWidgetSetup.jpg)
+
+### Custom widget launch button
+
+[customWidgetLaunchButton](./customWidgetLaunchButton): launch the widget from a button element anywhere on your website.
+
+![](./customWidgetLaunchButton/customWidgetLaunchButton.gif)
+
+### Custom floating widget launch icon
+
+[customFloatingWidgetLaunchIcon](./customFloatingWidgetLaunchIcon): launch the widget from a floating icon rendered anywhere on your website.
+
+![](./customFloatingWidgetLaunchIcon/customFloatingWidgetLaunchIcon.gif)
+
+### Hyperlink support
+
+[hyperlinkSupportWidget](./hyperlinkSupportWidget): support a plain-text URL that launches the widget on page load.
+
+![](./hyperlinkSupportWidget/hyperlinkSupportWidget.gif)
+
+### Load widget assets when button is clicked
+
+[loadAssetsOnButtonClick](./loadAssetsOnButtonClick): improve page load speed by only fetching widget static assets on button click, versus on page load.
+
+![](./loadAssetsOnButtonClick/loadAssetsOnButtonClick.gif)
+
+### Launch a new chat in a browser window
+
+[launchChatBrowserWindow](./launchChatBrowserWindow): make the widget launch in a new browser window.
+
+![](./launchChatBrowserWindow/launchChatBrowserWindow.gif)
diff --git a/hostedWidgetCustomization/basicWidgetSetup/README.md b/hostedWidgetCustomization/basicWidgetSetup/README.md
@@ -0,0 +1,45 @@
+# Basic setup
+
+Render Amazon Connect widget button in the lower-right corner of your website.
+
+> Also refer to the Admin Guide documentation: https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html
+
+![](./basicWidgetSetup.jpg)
+
+## Setup
+
+Include the provided `<script>` code snippet on your website:
+
+```html
+<!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
+<script type="text/javascript">
+  (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>");
+  amazon_connect("styles", {
+    openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+    closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+  });
+  // ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
+  amazon_connect("snippetId", "<REPLACE_ME>");
+  amazon_connect("supportedMessagingContentTypes", [
+    "text/plain",
+    "text/markdown",
+  ]);
+  // ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
+  amazon_connect('customerDisplayName', function(callback) {
+    const displayName = '<REPLACE_ME>';
+    callback(displayName);
+  });
+</script>
+```
diff --git a/hostedWidgetCustomization/basicWidgetSetup/basicWidgetSetup.jpg b/hostedWidgetCustomization/basicWidgetSetup/basicWidgetSetup.jpg
diff --git a/hostedWidgetCustomization/basicWidgetSetup/index.html b/hostedWidgetCustomization/basicWidgetSetup/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+  </head>
+
+  <body>
+    <header>
+      <h1>Your Website</h1>
+    </header>
+
+    <div class="container">
+      <div class="header">
+        <h1>Contact Us</h1>
+        <p>Have any questions? We'd love to hear from you.</p>
+      </div>
+      <div class="content">
+        <div class="card">
+          <h2>Help & Support</h2>
+          <p>
+            Our support team is spread across the globe to give you answers
+            fast.
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>
+
+  <!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
+  <script type="text/javascript">
+    (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>");
+    amazon_connect("styles", {
+      openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+      closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
+    });
+    // ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
+    amazon_connect("snippetId", "<REPLACE_ME>");
+    amazon_connect("supportedMessagingContentTypes", [
+      "text/plain",
+      "text/markdown",
+    ]);
+    // ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
+    amazon_connect('customerDisplayName', function(callback) {
+      const displayName = '<REPLACE_ME>';
+      callback(displayName);
+    });
+  </script>
+</html>
diff --git a/hostedWidgetCustomization/basicWidgetSetup/styles.css b/hostedWidgetCustomization/basicWidgetSetup/styles.css
@@ -0,0 +1,144 @@
+/* Reset some default browser styles */
+body,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+/* Set a background color and text color for the whole page */
+body {
+  background-color: #f0f0f0;
+  color: #333;
+  font-family: Arial, sans-serif;
+  text-align: center;
+}
+
+/* Style the header */
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+}
+
+/* Style the main content container */
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Style headings */
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+/* Style paragraphs */
+p {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+/* Style links */
+a {
+  color: #0077cc;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Style a button */
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #0077cc;
+  color: #fff;
+  text-decoration: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #005599;
+}
+
+/* Add additional styles for different elements as needed */
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #f0f0f0;
+}
+
+.container {
+  min-height: 50vh;
+  padding: 10px;
+  display: grid;
+  place-content: center;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 14px;
+}
+
+.header h1 {
+  text-transform: capitalize;
+  color: #333;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.header p {
+  font-size: 18px;
+  color: #777;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-top: 8px solid #48bb78;
+  margin-bottom: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 300px;
+  margin: 0 auto;
+  flex-grow: 1;
+}
+
+.card h2 {
+  text-transform: capitalize;
+  font-weight: bold;
+  font-size: 28px;
+  color: #333;
+}
+
+.card p {
+  font-size: 18px;
+  color: #777;
+  margin-top: 10px;
+}