-
Notifications
You must be signed in to change notification settings - Fork 214
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
create Hosted Widget customization examples #148
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we want to also add a note about rich messaging enabled vs disabled? Or just in general call out that other methods can be added here to pass display name, contact attributes, etc and add link?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
edit: will update 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why can't they pass display name/contact attributes? is that specific to if they specify this auto launch behavior?