Ctrlk
HomepageBlogContact Sales
For the complete documentation index, see llms.txt. This page is also available as Markdown.

WebApp Integration (deprecated)

This document has been deprecated.

When rendering your website via WebView, you can use the Hackle JavaScript SDK included in the website with the same functionality as the Hackle React Native SDK — without any changes to your website code — by applying the settings below.

The following tasks are required for React Native WebApp Integration.

  • Add a bridge at the point where WebView is rendered in the React Native SDK.

  • Wrap the JavaScript SDK used in WebView to create a ReactNative-specific Client.

React Native

Please complete the following tasks on the client side where the React Native SDK is installed.

Github: 0.0.3

  1. Add useHackleWebviewManager from the source code above to your project. 1-1. If you already have an existing useHackleWebviewManager, overwrite the script.

  2. Pass props to WebView via the useHackleWebviewManager hook.

ReactNative WebView JS Injection

Item
Description

hackleInjectedJavaScript

Sends a message from the WebView's JavaScript SDK to the React Native SDK to process the function on its behalf.

onHackleMessage

Processes messages received from the JavaScript SDK in the React Native SDK.

const hackleClient = createInstance("YOUR_SDK_KEY");

function App() {
  const webviewRef = useRef(null);
  const { hackleInjectedJavaScript, onHackleMessage, isHackleMessageEvent } =
        useHackleWebviewManager({
          postMessage: (message) => webviewRef.current?.postMessage(message),
          hackleClient,
        });

  return (
      <HackleProvider hackleClient={hackleClient}>
        <SafeAreaView>
          <View>
            <WebView
              ref={webviewRef}
              source={{ uri: "web_url" }}
              injectedJavaScriptBeforeContentLoaded={hackleInjectedJavaScript}
              onMessage={(e) => {
                if (isHackleMessageEvent(e)) {
                  onHackleMessage(e.nativeEvent.data);
                  return;
                }
              }}
            />
          </View>
        </SafeAreaView>
      </HackleProvider>
    );
}

Auto-collected Event Integration from WebView

This feature is supported in JavaScript SDK version 11.51.0 and above.

$page_view and $engagement events occurring on websites inside WebView are disabled by default. You can enable each auto-collected event individually by configuring HackleWebViewConfig when setting up the WebView bridge.

Configuration Options

Setting
Function
Default
Supported Bridge Version

automaticScreenTracking

Whether to collect $page_view events occurring on the website

false

0.0.3 +

automaticEngagementTracking

Whether to collect engagement events occurring on the website

false

0.0.3 +

JavaScript

Please complete the following tasks on the web side where the JavaScript SDK is installed.

The JavaScript bridge code works as follows:

  • Creates a Wrapper Client that has the same interface as the JavaScript SDK's hackleClient.

  • Receives requests such as track, variation, and featureFlag occurring in the web environment and forwards them asynchronously to the React Native SDK.

  • This is bridge-style code, and the key difference from the existing hackleClient is that all methods return a Promise.

The bridge setup in React Native must be completed first.

  • useHackleWebviewManager must be applied to the ReactNative WebView.

  • If this is not done beforehand, the WebApp integration will not work correctly.

Github: Full Source Code

Add the source code above to your project.

  • esm is recommended. The module is provided as a default export.

  • If you cannot use modules, use umd instead.

    • The module is provided in the global scope under the name HackleManager.

Source Code Integration

The source code is not provided as an npm package.

For more detailed integration instructions beyond the step-by-step guide below, please refer to the examples in the repository below.

TypeScript Support

Building react-native-webview-integration-js-bridge from github will emit type declaration files (d.ts).

Please refer to react-native-webview-nextjs-integration.

It provides an example of referencing file dependencies using the lib directory.

Creating an Instance

You can create an instance by calling createInstance as shown below.

Please fill in the import path according to your installation environment.

  • Export the created instance for use.

Calling Methods

Be aware that the return type of all methods is Promise.

For the types of supported methods, please refer to the JavaScript/ReactNative SDK documentation.

Are you using React/Vue/Next.js?

react-sdk is not supported in the React Native WebView WebApp integration environment.

react-sdk cannot be used as-is in the React Native WebView environment.

If you are using libraries/frameworks such as Vue, React, or Next.js inside React Native WebView, please refer to the guide below.

Examples

React

You can create and use hooks similar to the Custom hooks of the existing react-sdk.

Refer to the hooks included in the Example and write the hooks you need.

Why do I need to handle Loading?

Although the message send/receive latency is not long, it is recommended to implement loading handling.

  • This is to prevent users from seeing a different screen from what they initially saw after the experiment (variation) result is received.

Github: Source

PreviousMigration GuideNextPush Message Integration

Last updated