Embedding ReferralHero Widget in React Native WebView

React Native API Integration

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

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.