Android Apps

📘

How You Could Do It

There are many ways you may choose to integrate the DataGuard API to your apps. We show you below how you can embed our widget so you can begin collecting compliant permissions immediately

Integration using a WebView

The easiest integration of DataGuard into an Android app can be achieved by loading our widget into a WebView.

Before doing this, you will need a content template and a process that uses our API to create access tokens and provide them for use in the application.

Including the widget in a WebView

First, add a WebView to your layout.

XML

<WebView
    android:id="@+id/dataguard_webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Next, get the view in your Fragment and enable JavaScript execution.

Kotlin

val webView = view.findViewById<WebView>(R.id.dataguard_webview)
webView.settings.javaScriptEnabled = true

The widget can then be inserted into the WebView using the loadData method. We have simply inserted a multi-line string literal here, but any approach will work as long as you can inject the value of the user token into the script.

Kotlin

webView.loadData(
    """
        <div id="widget-container"></div>
        <script src="https://scripts.consentric.io/progressive-consent.min.js"></script>
        <script>
            window.addEventListener('load', () => {
                ProgressiveWidget.load({
                    id: 'widget-container',
                    templateId: '9mnJGBUd7vL',
                    token: '$token',
                    consentricLogo: false,
                });
            });
        </script>
        <style>
            .mld-pc-minimise,
            .mld-pc-button--cancel {
                display: none;
            }
        
            .mld-pc-app-show {
                position: initial;
                border: none;
                box-shadow: none;
                max-height: none;
                padding: 0;
            }
        
            .mld-pc-app__header {
                padding: 0;
            }
        </style>
    """.trimIndent(),
    "text/html",
    null
)

The <div> element with id widget-container will have the widget inserted into it when the scripts are evaluated. The first script loads our widget script, and the second configures it. The value of the user token is inserted into the literal so that it can be used by the script to render information for the correct user.

There is also a little bit of styling at the bottom that makes the widget fit nicely into an app. You can customise these styles further to fit your branding.

Interacting with the WebView

The above HTML is enough to render the widget, but we still need to be able to feed information back to the app when the user submits information so we can react to it. To do this we'd suggest using a JavaScript Interface.

First, create a class with two methods annotated with @JavascriptInterface

Kotlin

class DataGuardWidgetInterface(
    private val successCallback: (response: String) -> Unit,
    private val failureCallback: (error: String, request: String) -> Unit
) {
    @JavascriptInterface
    fun onSuccess(response: String) {
        successCallback(response)
    }

    @JavascriptInterface
    fun onFailure(error: String, request: String) {
        failureCallback(error, request)
    }
}

Next, register the interfaces using the below code. This should be done before the call to loadData added in the previous section. The onSuccess and onFailure functions should handle these events, for example moving to the next view in the flow, or displaying an appropriate error message.

Kotlin

webView.addJavascriptInterface(
    DataGuardWidgetInterface(::onSuccess, ::onFailure),
    "Android"
)

Then we need to modify the markup that's inserted using the loadData method to call these newly inserted functions using the widget's event callbacks. The entire markup can be found below, with the new event handling code added.

Kotlin

webView.loadData(
    """
        <div id="widget-container"></div>
        <script src="https://scripts.consentric.io/progressive-consent.min.js"></script>
        <script>
            window.addEventListener('load', () => {
                try {
                    ProgressiveWidget.load({
                        id: 'widget-container',
                        templateId: '9mnJGBUd7vL',
                        token: '$token',
                        events: {
                            onSuccess: async response => {
                                Android.onSuccess(JSON.stringify(await response.json()));
                            },
                            onFailure: (error, request) => {
                                Android.onFailure(error.message, JSON.stringify(request));
                            },
                        },
                        consentricLogo: false,
                    });
                } catch (e) {
                    Android.onFailure(`Failed to load widget: ${'$'}{e.message}`, '');
                }
            });
        </script>
        <style>
            .mld-pc-minimise,
            .mld-pc-button--cancel {
                display: none;
            }
        
            .mld-pc-app-show {
                position: initial;
                border: none;
                box-shadow: none;
                max-height: none;
                padding: 0;
            }
        
            .mld-pc-app__header {
                padding: 0;
            }
        </style>
    """.trimIndent(),
    "text/html",
    null
)

The try/ catch block will handle any errors that occur when trying to initialise the widget, for example if there is no internet access, an error will be thrown here. We are also using the onSuccess and onFailure event callbacks provided by the widget.