WebView User Session Continuity

For cases where your app uses WebViews, we provide a mechanism to inject a user session, so that the CMP on the WebView is not shown every time the user opens it.

To implement this feature the SDK offers the method getUserSessionData, which returns a String (JSON) with the user session.

Swift_iOSKotlin_AndroidDart_FlutterTypescript_{React Native}

This data must then be injected into a global variable called UC_UI_USER_SESSION_DATA in your WKWebView.

let sessionData = UsercentricsCore.shared.getUserSessionData()

let script = """
window.ucMobileSdk = {
    getUserSessionData: function() {
        return '\(sessionData)';
    }
}
"""

let userScript = WKUserScript(source: script, injectionTime: .atDocumentStart, forMainFrameOnly: true)
let contentController = WKUserContentController()
contentController.addUserScript(userScript)

let preferences = WKPreferences()
preferences.javaScriptEnabled = true

let webConfiguration = WKWebViewConfiguration()
webConfiguration.preferences = preferences
webConfiguration.userContentController = contentController

webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self

let myURL = URL(string:"https://<some_url>")
let myRequest = URLRequest(url: myURL!)
webView.load(myRequest)

This data must be injected using a JavaScriptInterface with a method getSessionData.

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true

webView.addJavascriptInterface(SampleJavascriptInterface(userSessionData), "ucMobileSdk")
webView.loadUrl("https://<some_url>")

class SampleJavascriptInterface(private val userSessionData: UserSessionData) {

    @JavascriptInterface
    fun getUserSessionData(): String? {
        return userSessionData
    }
}

This data must then be injected into a global variable called UC_UI_USER_SESSION_DATA. However due to the webview_flutter library limitations, it is important that you guarantee in some way or another that the data is available at the time the Usercentrics script is executed in the webview. For example:

FutureBuilder<String>(
  future: Usercentrics.userSessionData,
  builder: (context, snapshot) {
    final userSessionData = snapshot.data;
    if (userSessionData == null) return const SizedBox();
    return WebView(
      onWebViewCreated: (WebViewController controller) async {
        this.controller = controller;
        await controller.loadFlutterAsset('assets/webview_index.html'); // loadUrl or whatever
      },
      onPageFinished: (String url) async {
        await controller?.runJavascript("""
        window.UC_UI_USER_SESSION_DATA = $userSessionData;
        window.dispatchEvent(new Event('Usercentrics_userSessionData_injected'));
        """);
      },
      javascriptMode: JavascriptMode.unrestricted,
      debuggingEnabled: true,
    );
  }),
)

function addUsercentricsScript() {
    var settingsId = 'Yi9N3aXia';
    var script = document.createElement('script');
    script.id = 'usercentrics-cmp';
    script.setAttribute('data-settings-id', settingsId);
    script.setAttribute('src', 'https://app.usercentrics.eu/browser-ui/latest/bundle_legacy.js');
    script.async = true;
    document.head.appendChild(script);
}

window.addEventListener("Usercentrics_userSessionData_injected", function(){
    addUsercentricsScript();
});

See more here.

This data must then be injected into a global variable called UC_UI_USER_SESSION_DATA in your WebView injectedJavaScriptBeforeContentLoaded property.

<WebView
    javaScriptEnabled={true}
    domStorageEnabled={true}
    injectedJavaScriptBeforeContentLoaded={`window.UC_UI_USER_SESSION_DATA = ${userSessionData};`.toString()}
    source=... />

See more here.

Compatibility

User Session injection is only supported if your WebView is running version 1.4.0 or higher of the Usercentrics BrowserUI.