Skip to content

Commit 7df1542

Browse files
spenlep-amznspenlep-amzn
authored
create Hosted Widget customization examples (#148)
1 parent 9fab9e0 commit 7df1542

28 files changed

+1685
-0
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
44
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
55

6+
## [1.4.2] - 2023-10-10
7+
### Added
8+
- [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.
9+
610
## [1.4.1] - 2023-6-19
711
### Changed
812
- [Custom Chat Widget + cloudformationTemplates] - updated chat interface bundle file for additional interactive messages feature

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ At the moment, these are the solutions in this repo:
2424
6. **[startChatContactAPILocalProxy](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/startChatContactAPILocalProxy)**
2525
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.
2626

27+
6. **[hostedWidgetCustomization](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/hostedWidgetCustomization)**
28+
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)
29+
2730
## Resources
2831

2932
Here are a few resources to help you implement chat in your contact center:

‎hostedWidgetCustomization/README.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Hosted Widget Customizations
2+
3+
Additional ways to configure the Amazon Connect Hosted Widget on your website and further personalize the branding.
4+
5+
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.
6+
7+
```html
8+
<!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
9+
<script type="text/javascript">
10+
(function (w, d, x, id) {
11+
s = d.createElement("script");
12+
s.src =
13+
"https://<REPLACE_ME>.cloudfront.net/amazon-connect-chat-interface-client.js";
14+
s.async = 1;
15+
s.id = id;
16+
d.getElementsByTagName("head")[0].appendChild(s);
17+
w[x] =
18+
w[x] ||
19+
function () {
20+
(w[x].ac = w[x].ac || []).push(arguments);
21+
};
22+
})(window, document, "amazon_connect", "<REPLACE_ME>");
23+
amazon_connect("styles", {
24+
openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
25+
closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
26+
});
27+
// ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
28+
amazon_connect("snippetId", "<REPLACE_ME>");
29+
amazon_connect("supportedMessagingContentTypes", [
30+
"text/plain",
31+
"text/markdown",
32+
]);
33+
// ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
34+
amazon_connect('customerDisplayName', function(callback) {
35+
const displayName = '<REPLACE_ME>';
36+
callback(displayName);
37+
});
38+
</script>
39+
```
40+
41+
## Prerequisites
42+
43+
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)
44+
45+
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)
46+
47+
## Examples
48+
49+
### Basic setup
50+
51+
[basicWidgetSetup](./basicWidgetSetup): render Amazon Connect widget button in the lower-right corner of your website.
52+
53+
![](./basicWidgetSetup/basicWidgetSetup.jpg)
54+
55+
### Custom widget launch button
56+
57+
[customWidgetLaunchButton](./customWidgetLaunchButton): launch the widget from a button element anywhere on your website.
58+
59+
![](./customWidgetLaunchButton/customWidgetLaunchButton.gif)
60+
61+
### Custom floating widget launch icon
62+
63+
[customFloatingWidgetLaunchIcon](./customFloatingWidgetLaunchIcon): launch the widget from a floating icon rendered anywhere on your website.
64+
65+
![](./customFloatingWidgetLaunchIcon/customFloatingWidgetLaunchIcon.gif)
66+
67+
### Hyperlink support
68+
69+
[hyperlinkSupportWidget](./hyperlinkSupportWidget): support a plain-text URL that launches the widget on page load.
70+
71+
![](./hyperlinkSupportWidget/hyperlinkSupportWidget.gif)
72+
73+
### Load widget assets when button is clicked
74+
75+
[loadAssetsOnButtonClick](./loadAssetsOnButtonClick): improve page load speed by only fetching widget static assets on button click, versus on page load.
76+
77+
![](./loadAssetsOnButtonClick/loadAssetsOnButtonClick.gif)
78+
79+
### Launch a new chat in a browser window
80+
81+
[launchChatBrowserWindow](./launchChatBrowserWindow): make the widget launch in a new browser window.
82+
83+
![](./launchChatBrowserWindow/launchChatBrowserWindow.gif)

‎hostedWidgetCustomization/basicWidgetSetup/README.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Basic setup
2+
3+
Render Amazon Connect widget button in the lower-right corner of your website.
4+
5+
> Also refer to the Admin Guide documentation: https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html
6+
7+
![](./basicWidgetSetup.jpg)
8+
9+
## Setup
10+
11+
Include the provided `<script>` code snippet on your website:
12+
13+
```html
14+
<!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
15+
<script type="text/javascript">
16+
(function (w, d, x, id) {
17+
s = d.createElement("script");
18+
s.src =
19+
"https://<REPLACE_ME>.cloudfront.net/amazon-connect-chat-interface-client.js";
20+
s.async = 1;
21+
s.id = id;
22+
d.getElementsByTagName("head")[0].appendChild(s);
23+
w[x] =
24+
w[x] ||
25+
function () {
26+
(w[x].ac = w[x].ac || []).push(arguments);
27+
};
28+
})(window, document, "amazon_connect", "<REPLACE_ME>");
29+
amazon_connect("styles", {
30+
openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
31+
closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
32+
});
33+
// ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
34+
amazon_connect("snippetId", "<REPLACE_ME>");
35+
amazon_connect("supportedMessagingContentTypes", [
36+
"text/plain",
37+
"text/markdown",
38+
]);
39+
// ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
40+
amazon_connect('customerDisplayName', function(callback) {
41+
const displayName = '<REPLACE_ME>';
42+
callback(displayName);
43+
});
44+
</script>
45+
```

‎hostedWidgetCustomization/basicWidgetSetup/basicWidgetSetup.jpg

335 KB
Loading

‎hostedWidgetCustomization/basicWidgetSetup/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="styles.css" />
5+
</head>
6+
7+
<body>
8+
<header>
9+
<h1>Your Website</h1>
10+
</header>
11+
12+
<div class="container">
13+
<div class="header">
14+
<h1>Contact Us</h1>
15+
<p>Have any questions? We'd love to hear from you.</p>
16+
</div>
17+
<div class="content">
18+
<div class="card">
19+
<h2>Help & Support</h2>
20+
<p>
21+
Our support team is spread across the globe to give you answers
22+
fast.
23+
</p>
24+
</div>
25+
</div>
26+
</div>
27+
</body>
28+
29+
<!-- EXAMPLE SNIPPET - Edit all "<REPLACE_ME>" values -->
30+
<script type="text/javascript">
31+
(function (w, d, x, id) {
32+
s = d.createElement("script");
33+
s.src =
34+
"https://<REPLACE_ME>.cloudfront.net/amazon-connect-chat-interface-client.js";
35+
s.async = 1;
36+
s.id = id;
37+
d.getElementsByTagName("head")[0].appendChild(s);
38+
w[x] =
39+
w[x] ||
40+
function () {
41+
(w[x].ac = w[x].ac || []).push(arguments);
42+
};
43+
})(window, document, "amazon_connect", "<REPLACE_ME>");
44+
amazon_connect("styles", {
45+
openChat: { color: "#ffffff", backgroundColor: "#07b62a" },
46+
closeChat: { color: "#ffffff", backgroundColor: "#07b62a" },
47+
});
48+
// ALSO: further customize the widget styles: https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html
49+
amazon_connect("snippetId", "<REPLACE_ME>");
50+
amazon_connect("supportedMessagingContentTypes", [
51+
"text/plain",
52+
"text/markdown",
53+
]);
54+
// ALSO: how to pass contact attributes: https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html
55+
amazon_connect('customerDisplayName', function(callback) {
56+
const displayName = '<REPLACE_ME>';
57+
callback(displayName);
58+
});
59+
</script>
60+
</html>

‎hostedWidgetCustomization/basicWidgetSetup/styles.css

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/* Reset some default browser styles */
2+
body,
3+
h1,
4+
h2,
5+
h3,
6+
p {
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
/* Set a background color and text color for the whole page */
12+
body {
13+
background-color: #f0f0f0;
14+
color: #333;
15+
font-family: Arial, sans-serif;
16+
text-align: center;
17+
}
18+
19+
/* Style the header */
20+
header {
21+
background-color: #333;
22+
color: #fff;
23+
padding: 10px;
24+
}
25+
26+
/* Style the main content container */
27+
.container {
28+
max-width: 800px;
29+
margin: 0 auto;
30+
padding: 20px;
31+
}
32+
33+
/* Style headings */
34+
h1 {
35+
font-size: 24px;
36+
}
37+
38+
h2 {
39+
font-size: 20px;
40+
}
41+
42+
h3 {
43+
font-size: 18px;
44+
}
45+
46+
/* Style paragraphs */
47+
p {
48+
font-size: 16px;
49+
line-height: 1.5;
50+
}
51+
52+
/* Style links */
53+
a {
54+
color: #0077cc;
55+
text-decoration: none;
56+
}
57+
58+
a:hover {
59+
text-decoration: underline;
60+
}
61+
62+
/* Style a button */
63+
.button {
64+
display: inline-block;
65+
padding: 10px 20px;
66+
background-color: #0077cc;
67+
color: #fff;
68+
text-decoration: none;
69+
border: none;
70+
border-radius: 5px;
71+
cursor: pointer;
72+
}
73+
74+
.button:hover {
75+
background-color: #005599;
76+
}
77+
78+
/* Add additional styles for different elements as needed */
79+
body {
80+
font-family: Arial, sans-serif;
81+
text-align: center;
82+
background-color: #f0f0f0;
83+
}
84+
85+
.container {
86+
min-height: 50vh;
87+
padding: 10px;
88+
display: grid;
89+
place-content: center;
90+
}
91+
92+
.header {
93+
text-align: center;
94+
margin-bottom: 14px;
95+
}
96+
97+
.header h1 {
98+
text-transform: capitalize;
99+
color: #333;
100+
font-size: 32px;
101+
font-weight: bold;
102+
}
103+
104+
.header p {
105+
font-size: 18px;
106+
color: #777;
107+
margin-top: 10px;
108+
padding: 0 10px;
109+
}
110+
111+
.content {
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
gap: 20px;
116+
}
117+
118+
.card {
119+
background-color: #fff;
120+
border-radius: 8px;
121+
padding-top: 20px;
122+
padding-bottom: 10px;
123+
padding-left: 20px;
124+
padding-right: 20px;
125+
border-top: 8px solid #48bb78;
126+
margin-bottom: 10px;
127+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
128+
max-width: 300px;
129+
margin: 0 auto;
130+
flex-grow: 1;
131+
}
132+
133+
.card h2 {
134+
text-transform: capitalize;
135+
font-weight: bold;
136+
font-size: 28px;
137+
color: #333;
138+
}
139+
140+
.card p {
141+
font-size: 18px;
142+
color: #777;
143+
margin-top: 10px;
144+
}

0 commit comments

Comments
 (0)