Cordova

Introduction

Using the native iOS/Android WebView implies some extra setup in your Cordova project. This setup involves incorporating the IntelliProve Mobile SDK as a pre-packaged Cordova Plug-in and adding the necessary bridging code.

All this is nicely laid out in our step-by-step guide below.

The integration guide covers two sections:

Setting up the Cordova Plug-in

Interfacing with the Native code from Cordova (bridging)

GitHub

Our GitHub repository provides a fully functional example of our platform's integration, demonstrating the seamless setup and utilisation of our pre-packaged Cordova Plug-in.

https://github.com/IntelliProve/intelliprove-web-plugin-cordova

Minimal Requirements

For this guide, we assume a minimal 'Hello World' application generated by the Cordova project initialisation.

1. Cordova Plug-in Setup

Adding the framework

Last update 19/01/2026 16:35

cdv-intelliprovewebview-1.2.0.tgz

Copy the cdv-intelliprovewebview-x.x.x.tgz tarball into your Cordova App root directory and unpack it.

In your Cordova App root directory, execute cordova plug-in add /path/to/unpacked/tarball.

Configuration for Android/iOS

The Cordova plug-in already defines parameters to be added to iOS's Info.plist, and Android's Manifest, such as which permissions are needed, what deployment target is needed, ... So no additional configuration should be needed.

2. Cordova Integration

While many possibilities exist to bridge the gap between Native iOS/Android and Cordova, this document serves as a guide to integrating the IntelliProveSDK into a Cordova application project.

To be able to call functions on, and receive callbacks from the IntelliProve Cordova plug-in, we need to add code in the Cordova application.

Open index.js or wherever in the Cordova app that the IntelliProve web view will be used.

Add a callback to the deviceready event.

In that callback, add an event listener for a click, in which we'll open the web view through the IntelliProve Cordova plug-in. The URL to open the IntelliProve Face Scan Plug-in (webapp) is also added here. In our example, it is added on a button click.

Make sure to request the URL for the Face Scan plug-in using the Get Face Scan URL API endpoint.

On that plug-in function call, we'll add a callback to receive 'PostMessage' messages from the web view.

The post messages allow you to track the progress of the Face Scan and obtain the results from the IntelliProve plug-in immediately after the user has performed the Face Scan. This allows you to use the results in your mobile app, enabling you to link actions to the results or design a custom results screen.

You can find an overview of the different types of messages on the Message events page.

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // Add Callback to IntelliProve Native Module for presenting the IntelliWebView
    document.getElementById('openWebViewButton').addEventListener('click', function () {
        const url = "https://<subdomain>.intelliprove.com/...";

        if (cordova.plugins && cordova.plugins.CDVIntelliProveWebView && cordova.plugins.CDVIntelliProveWebView.presentWebView) {
            cordova.plugins.CDVIntelliProveWebView.presentWebView(url,
                function postMessageCallback(postMessage) {
                    // Handle the received postMessage
                    console.log('CDV PostMessage Full Body:', postMessage);

                    try {
                        // The PostMessage is received as a JSON String, so we need to parse it
                        const parsedMessage = JSON.parse(postMessage);
                        if (parsedMessage && parsedMessage.stage) {
                            console.log('CDV PostMessage Stage:', parsedMessage.stage);
                        } else {
                            console.warn('CDV invalid PostMessage format:', parsedMessage);
                        }
                    } catch (error) {
                        console.error('CDV error parsing PostMessage:', error);
                    }
                },
                function errorCallback(err) {
                    console.error("Failed to open WebView:", err);
                }
            );
        } else {
            console.warn("CDVIntelliProveWebView.presentWebView is not available.");
        }
    });
}

Also add a callback handler for receiving 'PostMessage' messages.

Finally, in index.html we assign the openWebViewButton button to whatever the entry point to the WebView should be.

<html>
    ...
    <body>
        <div class="app">
            <h1>IntelliProveWebView Cordova Example</h1>
            <button id="openWebViewButton">Open WebView</button>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

The WebView is automatically dismissed by the SDK when receiving the dismiss post message.

Now run the application as you normally would (assuming Cordova is installed as a ruby gem), for example:

bundle exec cordova clean ios or bundle exec cordova clean android

bundle exec cordova build ios or bundle exec cordova build android

bundle exec cordova run ios or bundle exec cordova run android

Next steps

To match the plug-in with your brand's colours and fonts, please visit our UI Customization documentation.