ClickFunnels

The ReferralHero / ClickFunnels integration provides seamless functionality, empowering you to use your own ClickFunnels form to capture signups.

ClickFunnels Classic

1. Log into your ClickFunnels account

2. Access the Funnel page by hovering over the ClickFunnels drop-down menu from your dashboard and clicking on Funnels

3. Choose the funnel you want to edit by clicking on the Funnel Name

4. Select the desired funnel step

5. Click on the Edit Page button of your funnel page to access the Page Editor

6. Scroll down and click “Get CSS Info” to note the button ID

1. Go to Settings > Tracking Code

1. Add the following scripts to the Header Code section: i. ReferralHero Global Tracking Code ii. Replace the button ID and campaign ID with your ClickFunnels button ID and ReferralHero campaign ID

<script>
    document.addEventListener('DOMContentLoaded', function () { 
        var submitButton = document.querySelector('# a'); 
        submitButton.onclick = function () { 
            var form = document.getElementById('cfAR'); 
            var data = { 
                email: form.querySelector('#cf_contact_email').value 
            }; 
            if (RH_) { 
                RH_.pendingReferral(data); 
            } 
        }; 
    });
</script>

1. Save the changes

ClickFunnels 2

1. Log into your ClickFunnels account

2. Go to Sites > Funnels

3. Access the Funnel page

4. Choose the funnel you want to edit by clicking on the Funnel Name

5. Select the desired funnel step

6. Click on the Edit Page button of your funnel page to access the Page Editor

1. Click on the button where you would like to add the script to edit the property, then go to the “Advanced” tab

1. In the section “Custom Attributes”, click “Add Custom Attribute”. Then enter “data-rh-form” in the Name field, and “true” in the Value field. Then save the changes

1. Click on the </> at the top right. Then go to the “Header Code” tab

1. Add the Global Tracking Code and the following javascript. Then click Save

<script>
document.addEventListener('DOMContentLoaded', function () {
  var submitButtons = document.querySelectorAll('[data-rh-form] a');
  submitButtons.forEach(function (submit) {
    submit.onclick = function () {
      var form = document.getElementById('cfAR');
      var data = {
        email: form.querySelector('#cf_contact_email').value,
        utm_source: form.querySelector('#utm_source').value,
        extra_field: form.querySelector('input[name="recognition_display_name"]') ? form.querySelector('input[name="recognition_display_name"]').value : null,
        extra_field2: form.querySelector('input[name="recognition_display_link"]') ? form.querySelector('input[name="recognition_display_link"]').value : null
      };
      if (data.extra_field === null) {
        delete data.extra_field;
      }
      if (data.extra_field2 === null) {
        delete data.extra_field2;
      }
      if (RH_xxxxxxxxxx) {
        RH_xxxxxxxxxx.form.submit(data);
      }
    };
  });
});
</script>