diff --git a/mobileChatExamples/iOS-WKWebView-sample/README.md b/mobileChatExamples/iOS-WKWebView-sample/README.md index 3f2cc1c..6783bf7 100644 --- a/mobileChatExamples/iOS-WKWebView-sample/README.md +++ b/mobileChatExamples/iOS-WKWebView-sample/README.md @@ -22,6 +22,44 @@ struct AppConfiguration { You can now build and run the iOS application. +## Communication Widget Configurations for WebView + +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. + +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 + +Here is an example code snippet to set the widget to use `WEBVIEW` displayType. +``` +amazon_connect('displayType', 'WEBVIEW'); +``` + +### 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. + ## Persistent Chat Example https://github.com/user-attachments/assets/eb10d365-9491-4e71-8204-072330bd64c3 @@ -35,7 +73,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', { @@ -72,4 +110,4 @@ Example of push notification Payload for a chat message: "messageType": "MESSAGE", "contentType": "text/plain", }; -``` \ No newline at end of file +``` 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?() } } }