---
title: Cordova
slug: technical-docs/cordova
icon: 👨‍💻
docTags: 
createdAt: 2025-04-30T16:12:44.723Z
---

# 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`

::File{src="https://api.archbee.com/api/presign/_0R_DnpmBBLLXmaoWvG2u/gSjhqtwgtmZwb7jyyi6Cv-20260119-153443.tgz" label="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

:::hint{type="info"}
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](docId\:BiuPVixvHltbukKLR2ATI) 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](docId\:KZ6XSnd6V4G8EfCgd02ib) 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>
```

:::hint{type="warning"}
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](docId\:vzz-ODpLrSTmbHTHZKLLd) documentation.