# Embedding ReferralHero Widget in React Native WebView

### 1. Identify the Subscriber Using the API

To begin, call the **Add Subscriber Endpoint** using the following endpoint:

**Endpoint:**\
`https://app.referralhero.com/api/sdk/v1/lists/UUID/subscribers`

Send the necessary mobile parameters and subscriber details. The API response will include a **subscriber ID**, which is required for authentication.\
It is crucial to store the **subscriber ID** securely as it will be used for future authentication. Make sure that the API call is handled properly and errors are logged for debugging.

### 2. Set Authentication Cookies in the WebView

Before loading the widget, ensure the WebView injects the **subscriber ID** as a cookie. These cookies allow the widget to automatically recognize the user without requiring manual authentication.\
This step helps in reducing friction for users, enabling a smoother experience without the need for repeated logins.

### 3. Embed the Widget Inside a WebView

The RH-hosted page, containing the widget, should be loaded within a **WebView** inside the React Native app. This ensures that the widget functions exactly as it does in a standard browser environment.\
Additionally, ensure that WebView settings allow JavaScript execution and storage access, which is necessary for proper widget functionality.

### 4. Auto-Redirect to the Share Screen

Once the widget detects the **authentication cookies**, it will bypass the login screen and directly load the share screen. This creates a **seamless user experience**, similar to accessing the widget from a logged-in web browser.

To further enhance user experience, consider adding loading indicators while the WebView is initializing to inform users of ongoing processes.

#### Implementation

```jsx
import React, { useEffect, useState, useRef } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';

const ReferralWidget = () => {
  const webViewRef = useRef(null);
  const [injectedJS, setInjectedJS] = useState('');

  useEffect(() => {
    const fetchId = async () => {
      const id = await AsyncStorage.getItem("id");
      if (id) {
        const script = `
          document.cookie = "__maitre-anonymous-MFxxxxxxxxx=${id}; path=/; max-age=86400";
          document.cookie = "__maitre-session-MFxxxxxxxxx=${id}; path=/; max-age=86400";
          window.ReactNativeWebView.postMessage(document.cookie);
        `;
        setInjectedJS(script);
      }
    };
    fetchId();
  }, []);

  const handleMessage = (event) => {
    //Alert.alert("Cookies", event.nativeEvent.data);
  };

  return (
    <View style={styles.container}>
      {injectedJS ? (
        <WebView 
          ref={webViewRef}
          source={{ uri: 'https://campaign.referralhero.com/MFxxxxxxxx/dashboard' }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true} 
          onLoadEnd={() => console.log("WebView Loaded Successfully")}
          injectedJavaScript={injectedJS}
          onMessage={handleMessage}
        />
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

export default ReferralWidget;
```

This implementation ensures that the **subscriber authentication process is seamless**, automatically logging users into the referral widget inside the React Native WebView.


---

# 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://berylsystems.gitbook.io/referral-hero-documentation/integrations/mobile-sdks/react-native/embedding-referralhero-widget-in-react-native-webview.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.