CSQWebViewWrapper constructor

const CSQWebViewWrapper({ required WebViewWrapperDelegate delegate, Key? key, })

Creates an instance of CSQWebViewWrapper that allows to use CSQ's features in the wrapped WebView.

For the support to work, you need to:

1. Enable javascript in the WebView.
2. Ensure the delegate is properly initialized

Important:

1. Widgets created between CSQWebViewWrapper and WebView will not be tracked:
   • They will not be selectable in the zoning analysis.
   • Gestures on those widgets will not be tracked. Therefore you should always use CSQWebViewWrapper as close to the WebView as possible.
2. To enable WebView support, it is required to build a Javascript Bridge between the content of the WebView and the native SDK. To do so, you will have to implement the CSQ WebView Javascript Tracking Tag in the web pages called in your app WebViews.
   • See https://docs.contentsquare.com/en/webview-tracking-web-tag/
3. Support of multiple WebViews at the same time is not yet possible.

Usage with UserScriptWebViewWrapperDelegate

// Using the `InAppWebView` of `flutter_inappwebview`

CSQWebViewWrapper(
  delegate: UserScriptWebViewWrapperDelegate(
    builder: (BuildContext context, String userScript) {
      return InAppWebView(
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            // 1. Ensure JavaScript is enabled
            javaScriptEnabled: true,
          ),
        ),
        initialUrlRequest: URLRequest(
          url: Uri.parse(url),
        ),
        initialUserScripts: UnmodifiableListView([
          UserScript(
            // 2.a Initialized the delegate properly
            // by setting the userScript as source
            source: userScript,
            // 2.b Initialized the delegate properly
            // by setting the injectionTime as AT_DOCUMENT_START
            injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START,
          ),
        ]),
      );
    },
  ),
)

Usage with JSChannelWebViewWrapperDelegate

// Using the `WebViewWidget` of `webview_flutter`

// 1. Ensure JavaScript is enabled
webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);

CSQWebViewWrapper(
  delegate: JSChannelWebViewWrapperDelegate(
    addJavaScriptChannel: (WebViewJSChannelHandler handler) {
      // 2. Ensure delegate is properly initialized
      webViewController.addJavaScriptChannel(
        handler.channelName,
        onMessageReceived: (jsMessage) {
          handler.onMessageReceived(jsMessage.message);
        },
      );
    },
    builder: (context) {
      return WebViewWidget(controller: webViewController);
    },
  ),
);

Implementation

const CSQWebViewWrapper({
  required this.delegate,
  super.key,
});