React JS
In this section, we will review the different methods to include the ReferralHero external JavaScript library in a ReactJS project.
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
public/index.html
Navigate to the
public
folder in your React application.Open
index.html
.Inside the
<head>
section, add the ReferralHero tracking script:
<!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)
src/App.js
(Root File)Open
src/App.js
in your React app.Inside the
useEffect
hook, include the script dynamically:
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!
Installing the ReferralHero Widget
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.
function Dashboard() {
return (
<div>
{/* Add the ReferralHero widget here */}
<div id="referralhero-dashboard-MFxxxxxxxxxx"></div>
</div>
);
}
export default Dashboard;
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:
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");
}
};
2) Using RH.pendingReferral
Method:
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 = {};
};
}, []);
3) Using RH.trackReferral
Method:
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 = {};
};
}, []);
4) Using RH.organicTrackReferral
Method:
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 = {};
};
}, []);
5) Using RH.trackTransaction
Method:
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 = {};
};
}, []);
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.
Last updated