From 5f2943f19db835419499e2a8bf79dd502726a34e Mon Sep 17 00:00:00 2001 From: spenlep-amzn <150714337+spenlep-amzn@users.noreply.github.com> Date: Thu, 29 May 2025 21:28:57 -0700 Subject: [PATCH] [hostedWidgetCustomization] add new-browser launch demo w/ persistence cookie --- .../newBrowserWindowFullScreen/README.md | 126 ++++++++++++ .../hosted-widget-new-window-recording.gif | Bin 0 -> 6649267 bytes .../newBrowserWindowFullScreen/index.html | 187 ++++++++++++++++++ 3 files changed, 313 insertions(+) create mode 100644 hostedWidgetCustomization/newBrowserWindowFullScreen/README.md create mode 100644 hostedWidgetCustomization/newBrowserWindowFullScreen/hosted-widget-new-window-recording.gif create mode 100644 hostedWidgetCustomization/newBrowserWindowFullScreen/index.html diff --git a/hostedWidgetCustomization/newBrowserWindowFullScreen/README.md b/hostedWidgetCustomization/newBrowserWindowFullScreen/README.md new file mode 100644 index 00000000..11f16626 --- /dev/null +++ b/hostedWidgetCustomization/newBrowserWindowFullScreen/README.md @@ -0,0 +1,126 @@ +# Amazon Connect Chat Widget - Full Screen Demo + +A demonstration of how to launch the Amazon Connect hosted chat widget in a new browser window with full screen embedded view. This implementation showcases chat widget integration with proper error handling, persistence across tabs, and responsive full-screen layout. + +> ⚠️ Important: as of May 2025, the hosted widget doesn't have official support for Hosted Widget embedded mode on desktop browser. Mobile devices do support full screen. This demo uses css overrides to enable full screen for desktop: `#amazon-connect-chat-widget [class*="acFrameContainer-"]` + + + +## Prerequisites + +- An Amazon Connect instance +- Access to create/modify chat widgets in your Amazon Connect instance +- Basic understanding of HTML/JavaScript + +## Setup Instructions + +1. **Get Your Amazon Connect Widget Code** + - Go to your Amazon Connect instance and create or get your existing chat widget + - Follow the [official instructions](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html) to create a widget if needed + +2. **Allow-list your Domain** + - Go to your Amazon Connect instance and open Communications Widget page + - Follow the [official instructions](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html#chat-widget-domains) for adding your domain + - For local testing, be sure to add `http://localhost:3000` + +3. **Configure the Widget** + - Open `index.html` + - Locate the commented widget configuration section + - Replace the placeholder code with your actual widget snippet: + +```diff + +
+ + + + + +``` + +## Running the Demo + +### Option 1: Direct Browser Access + +Open the file directly in your browser: +``` +file:///path/to/your/index.html +``` + +Note: Some features might be limited when using direct file access due to browser security restrictions. Using a local server (Option 1) is recommended. + +### Option 2: Using Node.js + +```bash +# Check Node.js version +node --version # Should be v20.x.x or newer + +# Start local server +npx live-server index.html --port=3000 + +# Access the demo at http://localhost:3000 +``` + +## Features + +- Full screen embedded chat widget +- Responsive layout +- Chat session persistence across tabs + +## Documentation References + +- [Adding Chat to Your Website](https://docs.aws.amazon.com/connect/latest/adminguide/add-chat-to-website.html) +- [Chat Widget Launch Behavior](https://docs.aws.amazon.com/connect/latest/adminguide/customize-widget-launch.html#load-assets) +- [Custom Styles](https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html) +- [Chat Persistence](https://docs.aws.amazon.com/connect/latest/adminguide/customize-widget-launch.html#chat-persistence-across-tabs) + +For best results, ensure your browser allows popups for the demo URL. diff --git a/hostedWidgetCustomization/newBrowserWindowFullScreen/hosted-widget-new-window-recording.gif b/hostedWidgetCustomization/newBrowserWindowFullScreen/hosted-widget-new-window-recording.gif new file mode 100644 index 0000000000000000000000000000000000000000..9663748c3fb9d1d5934c6554c12bdc1343f4c492 GIT binary patch literal 6649267 zcmeEt_dgrn`*z5*65V!Dd&Z6(Tg}*8W2>TeRjH6fs9m$FO6}R0Me&YJtrWGXmRdE^ z(pHCh`uRJa@Acz3=ZAA%=f2K;oqHJE)JG}1@d8unf1CsUfu5co3WKqV-MoB(^|F}3 zwM!S+uU=sf0dTNg;ACUt6jSHEc9DmZorn7hFE%)paZO>8FIoJ2*gUP GcDT--&@)u3wR-B735?M1kXpT
zbBb>S`F0zX)V}SqcL+T%95m!3#E|@#^5&9Lo^B%S?JIW#?YEqBNyVsUuT#`
zg9JZ98IS;KQ1KRw{lhkid6Y@Xn5k!3oo0Uy>Uu>8kx_}E7pkRM%B5QxMUmnRr{I;Q
zS(>AXZ`5F-%y62?Pz~J>4a^`6VmX>tQX>~=7}^%6ZQ2c8*A3|4r`=!<=-@WFaw6lC
zBHVT>g;jL^RG5JjNDpS51|=?;H=yBSHpzK5XY(43^bYWVj00y6&k3E