ReferralHero
  • Welcome to the Support Center
  • Common Questions
  • Features
    • Subscribers
      • Subscriber Profile
      • Unique Identifier
      • Active Visitors
      • 'Quick Add' Referral
      • Update Referral Status
    • Campaign Templates
      • Contest
      • Website Referral Analysis
      • Net Promoter Score
    • Unique Identifier
      • Phone Number
      • Confirmation Email
        • Thank-You Page
    • Automations
      • A/B Test
    • Security
      • Manual Review & Confirmation
      • Secondary Verification Method
      • High Risk
      • Blacklist
      • ReCaptcha
    • Reward
      • Reward Status
      • Advanced Reward Options
      • Transactions
    • Analytics
      • Active Visitors
      • Subscribers
      • Sources
      • Shares
      • Devices
      • Unsubscribers
    • Misc
      • Memorable referral links
      • 1-Click Signup
      • Forward & Refer
      • Coupon Codes
      • Custom Attribution
  • Integrate
    • Embeddable Widgets
      • Custom Domain
    • Integrations
      • Active Campaign
      • Aweber
      • Blockchain
      • Facebook Pixel
      • Calendly
      • Discord
      • HubSpot
      • Intercom
      • KakaoTalk
      • Klaviyo
      • Mailchimp
      • Salesforce
      • SendLane
      • Slack
      • Stripe
      • Tango Card
      • Telegram
      • Tremendous
      • Twilio
      • Typeform
      • Webhooks
      • Zapier
      • Zoho
    • Platform-specific Instructions
      • Google Tag Manager
      • WordPress
      • Webflow
      • SquareSpace
      • ClickFunnels
      • Unbounce
      • Instapage
      • Shopify
      • Carrd
      • WIX
    • Javascript Web API
      • Getting Started
      • Configuration file
      • Callbacks
      • Add a subscriber
      • Add a Pending Referral
      • Track multi-step conversion events
      • Track Transaction
      • Identify a Subscriber
      • Identify a Referrer
      • Generate Dashboard Widget
      • Generate Sharing-Screen
    • ReactJS
    • REST API
      • Errors
      • Webhooks
      • Objects
      • Endpoint Reference
    • Mobile SDKs
      • iOS SDK
        • Getting Started
        • Public Methods
        • Public Classes
        • API Interaction Methods
      • Android SDK
        • Getting Started
        • Public Methods
        • Public Classes
        • Listeners & Interfaces
      • Flutter SDK
        • Getting Started
        • Public Methods
      • React Native
        • Getting Started
        • Public Methods
        • Mobile App Testing in Development Mode
      • Mobile App Testing in Development Mode
  • API Tutorials
Powered by GitBook
On this page
  • Step 1: Retrieve the Section ID
  • Step 2: Add Custom Code to Your Wix Site

Was this helpful?

  1. Integrate
  2. Platform-specific Instructions

WIX

PreviousCarrdNextJavascript Web API

Last updated 2 months ago

Was this helpful?

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.