Android App Webview

Integrating DataGuard CPM into your Android app can be efficiently achieved by loading our widget into a WebView. This approach allows you to leverage the full functionality of the Manage Widget with minimal setup.

Before you begin, ensure that you have a content template and a process in place to generate Citizen Tokens using our API, which are necessary for authenticating users within the widget. See the Citizen Tokens page for more information.

Step 1: Adding the WebView to Your Layout

First, add a WebView to your Android layout file. This will serve as the container for the DataGuard widget.

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

Step 2: Enabling JavaScript in the WebView

In your Fragment, retrieve the WebView and enable JavaScript to ensure the widget functions correctly.

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

Step 3: Loading the Widget into the WebView

You can load the DataGuard widget into the WebView using the loadData method. This method inserts the necessary HTML and JavaScript directly into the WebView. Below is an example where the Citizen Token is dynamically injected into the script.

Note: make sure the script URL and the Template id is correct for your environment and tenant. See the Manage Widget page for more information.

webView.loadData(
    """
        <div id="dataguard"></div>
        <script src="https://scripts.consentric.io/core-widget.min.js"></script>
        <script>
            window.addEventListener('load', () => {
                StatefulWidget.load({
                    id: 'dataguard',
                    templateId: '9mnJGBUd7vL',
                    token: '$token',
                });
            });
        </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
)

Step 4: Interacting with the WebView

To handle interactions between the widget and your app, you can use a JavaScript Interface. This allows you to respond to events such as successful form submissions or errors.

Creating the JavaScript Interface

Define a Kotlin class with methods annotated with @JavascriptInterface to handle success and failure callbacks.

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)
    }
}

Registering the JavaScript Interface

Before calling loadData, register the interface with the WebView:

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

Updating the Widget Markup

Modify the HTML markup to include event handling for the success and failure events. Here’s the complete example:

webView.loadData(
    """
        <div id="dataguard"></div>
        <script src="https://scripts.consentric.io/core-widget.min.js"></script>
        <script>
            window.addEventListener('load', () => {
                try {
                    StatefulWidget.load({
                        id: 'dataguard',
                        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));
                            },
                        },
                    });
                } 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
)

By following these steps, you can seamlessly integrate the DataGuard Manage Widget into your Android app using a WebView, providing users with a secure and responsive interface for managing their data preferences.