From a923a53c4e32f9ec67b07e1405dd5599be97f3d9 Mon Sep 17 00:00:00 2001 From: Michael Liao Date: Mon, 6 Jan 2025 14:00:56 -0800 Subject: [PATCH 1/2] WebView improvements + documentation --- .../iOS-WKWebView-sample/README.md | 26 ++++++++++++++++++- .../ConnectWidgetViewController.swift | 3 +++ .../WkWebView Demo/ConnectWidgetWebView.swift | 5 ++++ 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/mobileChatExamples/iOS-WKWebView-sample/README.md b/mobileChatExamples/iOS-WKWebView-sample/README.md index 3f2cc1c..b5281dc 100644 --- a/mobileChatExamples/iOS-WKWebView-sample/README.md +++ b/mobileChatExamples/iOS-WKWebView-sample/README.md @@ -22,6 +22,30 @@ struct AppConfiguration { You can now build and run the iOS application. +### Communication Widget Configurations for WebView + +#### WebView DisplayType + +For a more tailored Communication Widget WebView experience, try adding the `WEBVIEW` displayType snippet field in your widget script that is hosted by the WebView. + +Here are the differences when using the `WEBVIEW` displayType: +* The widget will always render in fullscreen mode +* The widget will no longer have a minimize button +* The widget will auto-launch upon initialization +* The widget will auto-launch upon becoming visible + +Example code snippet: +``` +amazon_connect('displayType', 'WEBVIEW'); +``` + +#### Navigation on Widget Frame Close + +For a more integrated WebView experience, consider adding navigation controls when the communication widget closes. + +See [Supported widget snippet fields in Amazon Connect that are customizable +](https://docs.aws.amazon.com/connect/latest/adminguide/supported-snippet-fields.html) for more details on snippet fields. + ## Persistent Chat Example https://github.com/user-attachments/assets/eb10d365-9491-4e71-8204-072330bd64c3 @@ -35,7 +59,7 @@ The hosted widget's persistent chat feature is managed via the `persistedChatSes ### Setup In order for `persistedChatSession` to work, we also need to update our widget snippet to pass the `persistedChatSession` data back to the native app. We can achieve this by using the `registerCallback` snippet attribute and register callbacks for `CONNECTION_ESTABLISHED` to indicate when the session storage data is ready for retrieval and `CHAT_ENDED` to indicate when to clear the session storage data. Here is an example `registerCallback` snippet attribute that will enable the `persistentChatSession` functionality for WebViews. See [Supported widget snippet fields in Amazon Connect that are customizable -](https://docs.aws.amazon.com/connect/latest/adminguide/supported-snippet-fields.html) for more details on snippet attributes. +](https://docs.aws.amazon.com/connect/latest/adminguide/supported-snippet-fields.html) for more details on snippet fields. ``` amazon_connect('registerCallback', { diff --git a/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetViewController.swift b/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetViewController.swift index 34af26a..c0358ee 100644 --- a/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetViewController.swift +++ b/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetViewController.swift @@ -15,6 +15,9 @@ class ConnectWidgetViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() + connectWidgetWebView.onWidgetFrameClose = { [weak self] in + self?.navigationController?.popViewController(animated: true) + } view.addSubview(connectWidgetWebView) } diff --git a/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetWebView.swift b/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetWebView.swift index a2ac85f..e827b5c 100644 --- a/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetWebView.swift +++ b/mobileChatExamples/iOS-WKWebView-sample/WkWebView Demo/ConnectWidgetWebView.swift @@ -10,6 +10,8 @@ import Foundation import WebKit class ConnectWidgetWebView: WKWebView, WKScriptMessageHandler, WKNavigationDelegate { + var onWidgetFrameClose: (() -> Void)? + init() { // Initialize configuration and user content controller let configuration = WKWebViewConfiguration() @@ -24,6 +26,7 @@ class ConnectWidgetWebView: WKWebView, WKScriptMessageHandler, WKNavigationDeleg contentController.add(self, name: "persistedChatSessionToken") contentController.add(self, name: "clearPersistedChatSessionToken") + contentController.add(self, name: "widgetFrameClosed") // Uncomment below code to print WebView's console.log statements into XCode terminal @@ -90,6 +93,8 @@ class ConnectWidgetWebView: WKWebView, WKScriptMessageHandler, WKNavigationDeleg UserDefaults.standard.set(persistedChatSession, forKey: "persistedChatSession") } else if message.name == "clearPersistedChatSessionToken" { UserDefaults.standard.removeObject(forKey: "persistedChatSession") + } else if message.name == "widgetFrameClosed" { + onWidgetFrameClose?() } } } From a02a83ae7be670e8a63d3c260c671466ca07cf8b Mon Sep 17 00:00:00 2001 From: Michael Liao Date: Mon, 6 Jan 2025 14:33:23 -0800 Subject: [PATCH 2/2] Update README.md --- .../iOS-WKWebView-sample/README.md | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/mobileChatExamples/iOS-WKWebView-sample/README.md b/mobileChatExamples/iOS-WKWebView-sample/README.md index b5281dc..6783bf7 100644 --- a/mobileChatExamples/iOS-WKWebView-sample/README.md +++ b/mobileChatExamples/iOS-WKWebView-sample/README.md @@ -22,9 +22,11 @@ struct AppConfiguration { You can now build and run the iOS application. -### Communication Widget Configurations for WebView +## Communication Widget Configurations for WebView -#### WebView DisplayType +https://github.com/user-attachments/assets/fa260675-7f45-4beb-96ce-57564664fd67 + +### WebView DisplayType For a more tailored Communication Widget WebView experience, try adding the `WEBVIEW` displayType snippet field in your widget script that is hosted by the WebView. @@ -34,15 +36,27 @@ Here are the differences when using the `WEBVIEW` displayType: * The widget will auto-launch upon initialization * The widget will auto-launch upon becoming visible -Example code snippet: +Here is an example code snippet to set the widget to use `WEBVIEW` displayType. ``` amazon_connect('displayType', 'WEBVIEW'); ``` -#### Navigation on Widget Frame Close +### Navigation on Widget Frame Close For a more integrated WebView experience, consider adding navigation controls when the communication widget closes. +In this WebView example, the function to navigate on frame close is passed from `ConnectWidgetViewController.swift` into `ConnectWidgetWebView.swift` via `ConnectWidgetWebView`'s `onWidgetFrameClose` property. The trigger to execute the navigation is handled by the `widgetFrameClosed` content controller event in `ConnectWidgetWebView.swift`. This event needs to be triggered from within the WebView when the widget frame closes. + +To emit the `widgetFrameClosed` event, we need to modify the `registerCallback` snippet field in the snippet code. Here is an example code snippet used to emit `widgetFrameClosed` from within the WebView: + +``` +amazon_connect('registerCallback', { + 'WIDGET_FRAME_CLOSED': () => { + window?.webkit?.messageHandlers?.widgetFrameClosed?.postMessage(null) + }, +}); +``` + See [Supported widget snippet fields in Amazon Connect that are customizable ](https://docs.aws.amazon.com/connect/latest/adminguide/supported-snippet-fields.html) for more details on snippet fields. @@ -96,4 +110,4 @@ Example of push notification Payload for a chat message: "messageType": "MESSAGE", "contentType": "text/plain", }; -``` \ No newline at end of file +```