# WebApp Integration

{% hint style="info" %}
This feature is supported in React Native SDK version 3.28.0 and above, and Javascript SDK version 11.51.0 and above.
{% endhint %}

{% hint style="info" %}
For information about WebApp, refer to the [documentation](/en/development-guide/react-native/webapp-integration/react-native-web-app-intergration-deprecated.md).
{% endhint %}

{% hint style="warning" %}
Already integrating a WebApp?

If you are currently using the WebApp integration method that requires modifying both React Native and Javascript code, refer to the [migration guide](/en/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md) to migrate to the new WebApp integration method.
{% endhint %}

When rendering your own website through `WebView`, you can use the settings below to use the Hackle JavaScript SDK included in the website identically to the Hackle React Native SDK functions without modifying the website code.

When WebApp Integration is configured, all events that occur within the WebView are collected through the React Native SDK.

The following steps are required for React Native WebApp Integration.

1. Complete the [React Native SDK Integration](/en/development-guide/react-native.md).
2. Add `@hackler/react-native-webview-plugin` to your project.
3. Add the bridge when rendering WebView in React Native.

## 1. Add Plugin

[![](https://img.shields.io/npm/v/%40hackler%2Freact-native-webview-plugin)](https://www.npmjs.com/package/@hackler/react-native-webview-plugin)

{% tabs %}
{% tab title="npm" %}

```javascript
npm install --save @hackler/react-native-webview-plugin
```

{% endtab %}

{% tab title="yarn" %}

```javascript
yarn add @hackler/react-native-webview-plugin
```

{% endtab %}
{% endtabs %}

#### iOS

```shell
cd ios
pod install
```

## 2. Inject WebView Bridge

Add HackleWebViewConfig to the `nativeConfig` props of the react native webview.

You can create a config using the `createHackleWebViewConfig()` function.

```typescript
import { WebView } from 'react-native-webview';
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';

// 웹앱 브릿지 주입 전 반드시 핵클 SDK 초기화가 완료되어야 합니다.
const hackleClient = createInstance("YOUR_SDK_KEY");

function MyWebView() {
  const config = createHackleWebViewConfig();

  return (
    <HackleProvider hackleClient={hackleClient}>
      <WebView
          nativeConfig={hackleConfig}
          source={{ uri: currentUrl }}
      />
    </HackleProvider>
  );
}
```

#### Integrating Auto-collected Events from WebView

The `$page_view` and `$engagement` that occur in the website inside the WebView are disabled by default. You can enable each auto-collected event by configuring `HackleWebViewConfig` when setting up the WebView bridge.

```typescript
import { WebView } from 'react-native-webview';
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';

// 웹앱 브릿지 주입 전 반드시 핵클 SDK 초기화가 완료되어야 합니다.
const hackleClient = createInstance("YOUR_SDK_KEY");

function MyWebView() {
  const hackleConfig = createHackleWebViewConfig({
    automaticScreenTracking: true,
    automaticEngagementTracking: true,
    automaticRouteTracking: true,
  });

  return (
    <HackleProvider hackleClient={hackleClient}>
      <WebView
          nativeConfig={hackleConfig}
          source={{ uri: currentUrl }}
      />
    </HackleProvider>
  );
}
```

#### Configuration Options

<table data-full-width="false"><thead><tr><th width="213.57">Option</th><th width="295.49">Description</th><th width="125.81">Default</th><th width="108.1">Supported Bridge Version</th></tr></thead><tbody><tr><td><code>automaticScreenTracking</code></td><td>Whether to collect <code>$page_view</code> from the website</td><td><code>false</code></td><td>1.0.0 +</td></tr><tr><td><code>automaticEngagementTracking</code></td><td>Whether to collect <code>$engagement</code> from the website</td><td><code>false</code></td><td>1.0.0 +</td></tr><tr><td><code>automaticRouteTracking</code></td><td>Whether to automatically collect page information from the website</td><td><code>true</code></td><td>1.1.0 +</td></tr></tbody></table>

{% hint style="info" %}
To automatically collect `$page_view` and `$engagement` on page navigation, set `automaticScreenTracking`, `automaticEngagementTracking`, and `automaticRouteTracking` all to `true`.

When [manually collecting](/en/development-guide/javascript/event-tracking/js-track-page.md) `$page_view` and `$engagement` on page navigation, set `automaticScreenTracking` and `automaticEngagementTracking` to `true`, and set `automaticRouteTracking` to `false`.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/react-native/webapp-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.