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:

1. Setting up the Cordova Plug-in
2. 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.