diff --git a/README.md b/README.md index a9730d9..6c17d0c 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,32 @@ to manage your chat session. ## Usage +### Approach 1: Host Widget Snippet Integrated Custom UI (S3 Bucket/CDN) + +> ❗ IMPORTANT: follow steps listed in [HostedSnippetCustomBundleFileSetup.md](/./github/docs/HostedSnippetCustomBundleFileSetup.md) for a full setup walkthrough + +Integrate a fully customized the chat interface UI in the pre-built Hosted Widget, with all configurations available in the Connect Admin Console. The hosted widget can handle all of the logic to render the widget on your website and start chat sessions. + +Host your own `amazon-connect-chat-interface.js` bundle file and provide the link in the widget snippet configuration. + +```diff + + + +``` + +![Host Widget Snippet Integrated Custom UI](/.github/screenshots/custom-bundle-file-snippet-example.png) + +### Approach 2: Customized Widget and Chat Interface UI (Self-Hosted) + > ❗ IMPORTANT: follow steps listed in [CustomChatAndWidgetSelfHostedSetup.md](/.github/docs/CustomChatAndWidgetSelfHostedSetup.md) for a full setup walkthrough Fully customize the chat interface UI for your website, add a form to collect user info, and customize how the widget is rendered. Host and manage the bundle file yourself, importing it with a `` tag. Also refer to the [Custom Chat Widget Example](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/customChatWidget) code.