# Mobile and Webapp communcation

## Sending an event from your webapp -> mobile app

When the user would click your button to launch the Atomic flow, instead of calling the JavaScript SDK, you'd send a message to the WebView housing your webapp.

window.webkit.messageHandlers["init-atomic"].postMessage("example")

## Listening for the webapp event from your mobile app

extension ViewController: WKScriptMessageHandler{
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let dict = message.body as? [String : AnyObject] else {
            return
        }

        // "init-atomic" would be in this dictionary
        print(dict)
        
        // Call native iOS SDK
        Atomic.presentTransact(..., 
            onCompletion: { result in
                // Handle the result by sending it back into the webapp (see below)
            }
        )
    }
}

## Sending the result back into your webapp

### Native side

webview.evaluateJavaScript(
    """
    var event = new CustomEvent('atomic-event', {
        detail: { name: "atomic-result", payload: \(result) }
    });
    document.body.dispatchEvent(event);
    """
)

### Mobile app side

document.body.addEventListener(
    'atomic-event',
    ({ detail }) => {
        console.log(detail.name)
        console.log(detail.payload)
    }
)