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."

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

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

4. Choose a category from the options.

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

6. Publish your site.

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

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

9. Take note of the div ID associated with that section.

Step 2: Add Custom Code to Your Wix Site

1. In your ReferralHero campaign, navigate to the Installation 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 div ID noted earlier on line #7 in the code below.

<!-- start ReferralHero code -->  
Paste your ReferralHero global tracking code here

  window.RHConfig = {
    callbacks: {
      onLoad: function() {
        var widget = document.getElementById('add your WIX section div id here');
        var optin_form = document.createElement('div');
        optin_form.id = 'maitre-widget';
        optin_form.style.marginTop = '80px';
        if (widget){
          widget.appendChild(optin_form);
        }
      }
    }
  }
</script>  <!-- end ReferralHero code -->  

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

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

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

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

Example code:

<!-- 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=i+'/widget/'+t+'.js',e.parentNode.insertBefore(c,e)}(window,document,'https://app.referralhero.com','MF6478b97770');

  window.RHConfig = {
    callbacks: {
      onLoad: function() {
        var widget = document.getElementById('bgMedia_comp-ljmgt9ei');
        var optin_form = document.createElement('div');
        optin_form.id = 'maitre-widget';
        optin_form.style.marginTop = '80px';
        if (widget){
          widget.appendChild(optin_form);
        }
      }
    }
  }
</script>  <!-- end ReferralHero code -->  

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

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

10. Click "Apply" to save the changes.

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