Native app communication

Communicating with Root host site within native apps

Root requires some complex interactions to be performed post-authentication (following "bridge") on on our host site (bind.joinroot.com). Partners can transparently integrate these scenes into their mobile applications by rendering iframes, with some additional configuration.

Root uses Javascript to communicate key events through the user's iframe, directly to partner applications. Please refer to the client events table at the bottom of this document for a list of supported functionality.

Mobile app configuration

This guide assumes you are following official iOS and Android documentation when rendering iframes, and instead focuses on the additional configuration to listen for key events.

iOS

1. In the WKWebkitView you're creating to display the iframe content, add the following code in order to register a custom message handler, named rootMessageHandler

Objective-C

  var embeddedMessageHandler: String = “rootMessageHandler”
  mWebKitView.configuration.userContentController.add(self, name: embeddedMessageHandler)

2. Now that you've initialized a custom message handler, you can wire it up to custom logic when it detects a message:

Objective-C

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == embeddedMessageHandler {
      // perform checks against message.body in order to determine which message was broadcasted
    }
  }

Android

1. In the Webview you'll be using to display the iframe content, we'll be enabling Javascript to respond to window events.

Kotlin

  mWebView.settings.javaScriptEnabled = true

2. Next, we'll create a class which will be used to supply window methods within the iframe to Javascript. Ensure your class contains a onEmbeddedEvent method, marked with the @JavascriptInterface decorator. Messages correspond to the client events table at the bottom of this document.

Kotlin

class JSBridge(){
    @JavascriptInterface
    fun onEmbeddedEvent(message:String){
      // perform checks against message in order to determine which message was broadcasted
    }
}

3. Finally, we'll attach our new class as an interface to our iframe, utilizing Webview's addJavascriptInterface method:

Java

  mWebView.addJavascriptInterface(JSBridge(), "JSBridge")

Supported client events

Event name (message body)	Operation	Description
cancelled		Triggered when a bridged user exits the embedded bind flow
completed	Quote customization	Triggered when a bridged user successfully customizes a quote

Additional resources:

• Communication from WebView to Native iOS/Android App