Installation Packages

Our highly recommended mobile solution is to use our Android and iOS SDKs found here. Installation and Usage guides can be found there:

• iOS - https://github.com/Forethought-Technologies/solve-ios
• Android - https://github.com/Forethought-Technologies/solve-android

Mobile App Installation without Forethought SDKs (NOT RECOMMENDED)

All mobile platforms are implemented using similar patterns. A “Get Help” button of some sort opens up a new WebView screen inside of the mobile app. The URL passed to the WebView will look like “https://solve-widget.forethought .ai/?data-api-key=\(API_KEY)”. Other parameters such as data and configuration parameters may also be passed via the URL for different widget configurations. 

The WebView screens will need to be set up in a way that they can receive messages from the Forethought widget. For example, if the WebView receives the message “forethoughtWidgetClosed” it will usually want to go back to the previous screen. We have demos for each platform to help you along the way.

WebView Guides:

• Android
• iOS
• React Native

Messaging

• Android
  • webView.settings.javaScriptEnabled = true
  • addJavaScriptInterface and name it JSBridge
• widget will call window.JSBridge.postMessage
• inside of your private class JSBridge the following code will receive the message (i.e. “forethoughtWidgetClosed”)

@JavascriptInterface
fun postMessage(other: String) {
if (other == “forethoughtWidgetClosed”) {
// do something
}
}

• iOS
  • In loadView() add the following

let contentController = WKUserContentController()
         contentController.add(self, name: "widgetObservable")
let config = WKWebViewConfiguration()
        config.userContentController = contentController

• Create a WKScriptMessageHandler extension
• widget will call window.webkit.messageHandlers.widgetObservable.postMessage

// example WKScriptMessageHandler extension to receive messages

extension <YourWebViewClass> : WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
let dict = message.body as! String
let jsonData = Data(dict.utf8)
let responseData  = try? JSONDecoder().decode(WidgetData.self, from: jsonData)
guard let data = responseData else { return }
if data.event == "forethoughtWidgetClosed" { // do something  }      }

React Native onMessage example

• following is the onMessage Prop on the WebView component from react-native-webview
• our widget will call window.ReactNativeWebView.postMessage

onMessage={message => {
const {event} = JSON.parse(message.nativeEvent.data);
switch (event) {
case "forethoughtWidgetClosed":
// close the webview here
return;

case "forethoughtWidgetIntegrationHandoff":
// event.data will have the following attributes and 
// you can use these to perform the handoff that has 
// been requested
additi onalParameters?: {};
department?: string;
      email: string;
      featureFlags?: string[];
      integration: "zendesk" | "salesforce" | etc.;
      name: string;
      question: string;
default:
return;
   }
}}