# 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](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](https://docs.intelliprove.com/downloads/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](https://docs.intelliprove.com/technical-docs/rest-api#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](https://docs.intelliprove.com/technical-docs/message-events) page.

```javascript
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
<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](https://docs.intelliprove.com/technical-docs/ui-customization) documentation.