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":
      const data: {
        additionalParameters?: Record<string, unknown>;
        department?: string;
        email: string;
        event: "forethoughtWidgetIntegrationHandoff";
        featureFlags?: string[];
        integration: "zendesk" | "salesforce" | ...;
        name: string;
        question: string;
      } = message.nativeEvent.data;

      // perform handoff here

      return;
   }
}}