React JS

PreviousGenerate Sharing-Screen NextPlatform Specific Integration

Last updated 2 months ago

In this section, we will review the different methods to include the ReferralHero external JavaScript library in a ReactJS project.

Please Note:

RH_MFxxxxxxxxxxx are placeholders for your campaign's UUID, which you will need to replace with your actual campaign UUID.

Create and Set Up the React Application:

Step 1: Create a React Application

Open your terminal or command prompt and use the following command to create a new React app:

npx create-react-app name_of_the_app

Step 2: Navigate to the Application Directory

After the application has been created, navigate to the project directory using:

cd name_of_the_app

Step 3: Open the Project Structure

Navigate through the default structure generated by create-react-app. The main file you’ll be working with is App.js located in the src folder & can design your custom pages.

Now you're ready to start adding your custom code or configurations!

Add ReferralHero Global Tracking Code

Option 1: Add in `public/index.html`

Navigate to the public folder in your React application.
Open index.html.
Inside the <head> section, add the ReferralHero tracking script:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    
<!-- start ReferralHero code -->
    <script>
      !function(m,a,i,t,r,e){if(m.RH)return;r=m.RH={},r.uuid
      =t,r.loaded=0,r.base_url=i,r.queue=[],m.rht=function()
      {r.queue.push(arguments)};e=a.getElementsByTagName('script')
      [0],c=a.createElement('script');c.async=!0,c.src=
      'https://referralhero-global-code.s3.amazonaws.com/'+'production'+
      '/'+t+'.js',e.parentNode.insertBefore(c,e)}(window,document,
      'https://app.referralhero.com/','RHxxxxxxxxx');  
    </script>
<!-- end ReferralHero code -->

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Option 2: Add in `src/App.js` (Root File)

Open src/App.js in your React app.
Inside the useEffect hook, include the script dynamically:

src/App.js

import { useEffect } from 'react';

function App() {

  useEffect(() => {
    const script = document.createElement('script');
    script.textContent = `
      !function(m,a,i,t,r,e){if(m.RH)return;r=m.RH={},r.uuid
      =t,r.loaded=0,r.base_url=i,r.queue=[],m.rht=function()
      {r.queue.push(arguments)};e=a.getElementsByTagName('script')
      [0],c=a.createElement('script');c.async=!0,c.src=
      'https://referralhero-global-code.s3.amazonaws.com/'+'production'+
      '/'+t+'.js',e.parentNode.insertBefore(c,e)}(window,document,
      'https://app.referralhero.com/','RHxxxxxxxxx');
    `;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      <h1>Welcome to My App</h1>
    </div>
  );
}

export default App;

Both methods will enable the ReferralHero script in your React application. Use the one that fits best with your project structure!

You have the flexibility to add the ReferralHero widget to specific components or pages of your application. Since the global tracking script is already included in the root file, you don’t need to add it again on each page.

Steps to Install the Widget

Choose the Widget to Install
- ReferralHero provides multiple widget types, such as the Signup Widget, Dashboard Widget, and Sharing Widget.
- You can select the appropriate widget based on your campaign goals.
Insert the Widget's HTML Element
- After adding the tracking script, include the widget's HTML code into your React component where you want the widget to appear. You need to replace the placeholder MFxxxxxxxxxx with your campaign's UUID.
Code Example: Adding a widget in a component:
- For example , here we have added the advocate dashboard widget in newly created dashboard component. You can add it wherever you want.

src/Dashboard.js

function Dashboard() {
  return (
    <div>
      {/* Add the ReferralHero widget here */}
      <div id="referralhero-dashboard-MFxxxxxxxxxx"></div>
    </div>
  );
}

export default Dashboard;

Note: The MFxxxxxxxxxx is a placeholder and should be replaced with your campaign's UUID.

Adding ReferralHero Custom Methods for Tracking User Actions

To utilize custom methods like RH.form.submit ,RH.trackReferral , etc in your React application, follow these steps:

1) Using `RH.form.submit` Method:

The RH.form.submit method allows you to add subscribers to your referral campaign directly from your forms. This integration simplifies the signup process for your users, making it easy for them to join your referral program. For more detailed information about RH.form.submit and its functionalities, click here.

  const handleSubmit = (e) => {
    e.preventDefault();

    const data = {
      email: email,
      name: name,
      phone_number: phone,
    };
    
    if (window.RH_MFxxxxxxxx) {
      window.RH_MFxxxxxxxxx.form.submit(data)
      console.log("Subscriber created or tracked successfully");
    } else {
      console.log("Subscriber not tracked");
    }
  };

import React, { useState } from 'react';

const Register = () => {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    const data = {
      email: email,
      name: name,
      phone_number: phone,
    };
    
    if (window.RH_MFxxxxxxxxx) {
      window.RH_MFxxxxxxxxx.form.submit(data)
      console.log("Subscriber created or tracked successfully");
    } else {
      console.log("Subscriber not tracked");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Name" 
        required 
      />
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email" 
        required 
      />
      <input 
        type="text" 
        value={phone} 
        onChange={(e) => setPhone(e.target.value)} 
        placeholder="Phone Number" 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Register;

2) Using `RH.pendingReferral` Method:

To track referrals that enter the first step of a multi-step conversion event, you can use the RH.pendingReferral method. For more detailed information about RH.pendingReferral and its functionalities, click here.

useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("referral-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                name: form.querySelector('#name').value, 
                email: form.querySelector('#email').value,
              };
              window.RH.pendingReferral(data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []);

import React, { useEffect } from 'react';

const Login = () => {

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("referral-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                name: form.querySelector('#name').value, 
                email: form.querySelector('#email').value,
              };
              window.RH.pendingReferral(data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []); 

  return (
    <form id="referral-form">
      <input type="text" id="name" placeholder="Name" required />
      <input type="email" id="email" placeholder="Email" required />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Login;

3) Using `RH.trackReferral` Method:

The RH.trackReferral method is used to track referrals or add them to a campaign if they already exist as "Pending." If a referral is recognized through cookies, a new referral will automatically be created in the appropriate campaign. If the user is not a referral, no action will be taken by the system.

For more detailed information about RH.trackReferral and its functionalities, click here.

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("refer-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const email = form.querySelector('#email').value;
              const data = {
                name: form.querySelector('#name').value, 
                transaction_id: form.querySelector('#transaction_id').value,
              };
              window.RH.trackReferral(email, data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []);

import React, { useEffect } from 'react';

const Refer = () => {

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("refer-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const email = form.querySelector('#email').value;
              const data = {
                name: form.querySelector('#name').value, 
                transaction_id: form.querySelector('#transaction_id').value,
              };
              window.RH.trackReferral(email, data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []); 

  return (
    <form id="refer-form">
      <input type="text" id="name" placeholder="Name" required />
      <input type="email" id="email" placeholder="Email" required />
      <input type="text" id='transaction_id' placeholder="Transaction ID" required />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Refer;

4) Using `RH.organicTrackReferral` Method:

The RH.organicTrackReferral function is used to track referrals or add organic subscribers to your ReferralHero campaign on the conversion page. This function ensures that both referred and non-referred users are accurately tracked and recorded in your campaign. For more detailed information about RH.organicTrackReferral and its functionalities, click here.

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("organic-referral-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                name: form.querySelector('#name').value, 
                email: form.querySelector('#email').value,
                phone_number: form.querySelector('#phone').value,
              };
              window.RH_MFxxxxxxxxxxx.organicTrackReferral( data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []);

import React, { useEffect } from 'react';

const Refer = () => {

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("organic-referral-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                name: form.querySelector('#name').value, 
                email: form.querySelector('#email').value,
                phone_number: form.querySelector('#phone').value,
              };
              window.RH_MFxxxxxxxxxx.organicTrackReferral( data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []); 

  return (
    <form id="organic-referral-form">
      <input type="text" id="name" placeholder="Name" required />
      <input type="email" id="email" placeholder="Email" required />
      <input type="text" id='phone' placeholder="Phone" required/>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Refer;

5) Using `RH.trackTransaction` Method:

This method allows you to track transactions by passing relevant transaction data such as the amount, product ID, and customer email.

For more detailed information about RH.trackTransaction and its functionalities, click here.

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("transaction-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                  email: form.querySelector('#email').value,
                  amount: form.querySelector('#amount').value,
                  product_id: form.querySelector('#product_id').value,
                  transaction_id: form.querySelector('#transaction_id').value,
                };
              window.RH_MFxxxxxxxxxx.trackTransaction(data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []);

import React, { useEffect } from 'react';

const Transaction = () => {

  useEffect(() => {
    window.RHConfig = {
      callbacks: {
        ready: function () {
          const form = document.getElementById("transaction-form");
          if (form) {
            form.addEventListener("submit", function (e) {
              e.preventDefault(); 
              const data = {
                  email: form.querySelector('#email').value,
                  amount: form.querySelector('#amount').value,
                  product_id: form.querySelector('#product_id').value,
                  transaction_id: form.querySelector('#transaction_id').value,
                };
              window.RH_MFxxxxxxxxxx.trackTransaction(data);
            });
          }
        },
      },
    };
    return () => {
      window.RHConfig = {};
    };
  }, []); 

  return (
    <form id="transaction-form">
      <input type="email" id="email" placeholder="Email" required />
      <input type="number" id="amount" placeholder="Amount" required />
      <input type="text" id="product_id" placeholder="Product ID" required />
      <input type="text" id="transaction_id" placeholder="Transaction ID" required /> 
      <button type="submit">Submit</button>
    </form>
  );
};

export default Transaction;

By implementing this, ReferralHero will record the transaction and handle the attribution automatically.

By leveraging these powerful methods—form.submit, pendingReferral, trackReferral, organicTrackReferral, and trackTransaction—you can efficiently manage user tracking, referrals, and transaction attribution in your ReferralHero campaigns.

Create and Set Up the React Application:

Add ReferralHero Global Tracking Code

Option 1: Add in public/index.html

Option 2: Add in src/App.js (Root File)

Installing the ReferralHero Widget

Adding ReferralHero Custom Methods for Tracking User Actions

1) Using RH.form.submit Method:

2) Using RH.pendingReferral Method:

3) Using RH.trackReferral Method:

4) Using RH.organicTrackReferral Method:

5) Using RH.trackTransaction Method: