ReactJS

Here we will review the different methods to include the ReferralHero external JavaScript library in ReactJS.

PLEASE NOTE:

In each of these example methods, we will be installing the ReferralHero Global Tracking Code and the Dashboard Widget. Replace the <div> to install a different widget, etc.
MFxxxxxxxxxxx or RH_MFxxxxxxxxxxx (if running multiple campaigns) is just a placeholder and must be replaced with your campaign UUID.

Steps to create the application:

Step 1: Create a React application using the following command inside your terminal or command prompt:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Project Structure

Now modify the default App.js file inside your source code directory according to any of the following approaches.

Approach 1: Using react-helmet Package

Installation: Open the terminal inside your ReactJS project folder and write the following code to install react-helmet Package.

npm install --save react-helmet --legacy-peer-deps

Add the below code in your App.js or root component.

import React from 'react';
import { Helmet } from 'react-helmet';

const App = () => {
  return (
    <div>
      <Helmet>
        <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=i+'/widget/'+t+'.js',e.parentNode.insertBefore(c,e)}
            (window,document,'https://app.referralhero.com','MFxxxxxxxxxxx');
          `}
        </script>
      </Helmet>
      <div id='maitre-widget'></div>
    </div>
  );
};

export default App;

Approach 2: Using JavaScript DOM Methods

Add the below code in your App.js or root component.

import './App.css';
import React, { 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=i+'/widget/'+t+'.js',e.parentNode.insertBefore(c,e)}
      (window,document,'https://app.referralhero.com','MFxxxxxxxxxxx');
    `;

    document.body.appendChild(script);

    // Cleanup the script tag on component unmount
    return () => {
      document.body.removeChild(script);
    };
  }, []);


  return (
    <div className="App">
      <div id='maitre-widget'></div>
    </div>
  );
}

export default App;

Approach 3: Using tag in index.html of public directory

We can add the scripts directly in the ReactJS using the index.html file in the public directory. Go to the public directory and add the script using the script tag inside the head tag.

<!DOCTYPE html>

<head>
  <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=i+'/widget/'+t+'.js',e.parentNode.insertBefore(c,e)}(window,document,'https://app.referralhero.com','MFxxxxxxxxxxx');
  </script>
</head>
<body>
  <div id='maitre-widget'></div>
</body>
</html>

PreviousGenerate the sharing screen NextREST API

Last updated 4 months ago