> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/en/development-guide/react-native/webapp-integration.md).

# 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

{% hint style="warning" %}
If you are using React Native 0.81 or later, use plugin version 1.1.1 or later.
{% endhint %}

[![](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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.