WIX

ReferralHero's integration with Wix is a straightforward process that involves just a few simple steps. Please follow the instructions below to integrate ReferralHero with your Wix site.

Step 1: Retrieve the Section ID

1. Access your Wix site's editor by going to your site's dashboard and clicking "Edit Site."

1. Navigate to the page where you want to embed the ReferralHero widget.

2. Click "Add a Section" on the left side of the Editor.

3. Choose a category from the options.

4. Select the desired section to add it to your page.

5. Publish your site.

1. View your live site, right-click, and select "Inspect" to open the developer tools.

1. In the "Elements" panel of the developer tools, locate the section you just created.

2. Take note of the section ID.

Step 2: Add Custom Code to Your Wix Site

1. In your ReferralHero campaign, navigate to the Launch tab to retrieve the global tracking code specific to your campaign.

2. Add your ReferralHero global tracking code to line #2 in the code provided below.

3. Insert the section ID noted earlier on line #16 in the code below.

Replace 'MFxxxxxxxxxx' with your specific campaign UUID.

<script>
Paste your ReferralHero global tracking code here

  window.RHConfig = {
    callbacks: {
      onLoad: function() {
      // Remove both the extra div inside section
        var bgLayer = document.getElementById('add your WIX section div id here');
          if (bgLayer) {
            bgLayer.remove();
          }
        var inlineContent = document.querySelector('[data-mesh-id="add your WIX section div data-mesh-id here"]');
          if (inlineContent) {
            inlineContent.remove();
          }
        var widget = document.getElementById('add your WIX section id here');
        var optin_form = document.createElement('div');
        optin_form.id = 'referralhero-dashboard-MFxxxxxxxxx';
        optin_form.style.marginTop = '80px'; (set according to your requirements)
        if (widget){
          widget.appendChild(optin_form);
        }
      }
    }
  }
</script>

1. Go to the "Settings" section in your WIX site's dashboard.

2. Click the "Custom Code" tab within the "Advanced" section.

1. Click "+ Add Custom Code" at the top right.

1. Paste your ReferralHero global tracking code and the section id code snippet in the provided text box.

Example 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','RHac9f31aef1');
  window.RHConfig = {
    callbacks: {
      onLoad: function() {
        var bgLayer = document.getElementById('bgLayers_comp-m5pip50i');
        if (bgLayer) {
          bgLayer.remove();
        }
        var inlineContent = document.querySelector('[data-mesh-id="comp-m5pip50iinlineContent"]');
        if (inlineContent) {
          inlineContent.remove();
        }
        var widget = document.getElementById('comp-m5pip50i');
        var optin_form = document.createElement('div');
        optin_form.id = 'referralhero-dashboard-MFxxxxxxxx';
        optin_form.style.marginTop = '80px';
        if (widget){
          widget.appendChild(optin_form);
        }
      }
    }
  }
</script>

1. Under the "Add Code to Pages" option, select "All Pages."

2. Under the "Place Code in" option, choose "Head."

3. Click "Apply" to save the changes.

Following these steps, the ReferralHero widget will be successfully added to your WIX site.