Webflow

Adding the ReferralHero Tracking Code

Step 1: Log in to your Webflow account, select your project, and navigate to the Settings page.

Step 2: In the Settings menu, go to Custom Code.

Step 3: Go to your Campaign > Edit Campaign > Launch instructions and copy your Global Tracking Code

Step 4: Paste the ReferralHero Tracking Code into the Head Code text area, then save your changes.

Embedding the ReferralHero Widget

Step 1: After adding the tracking code , Go to Webflow dashboard, select your project, and enter Designer Mode.

Step 2: Navigate to the page where you want to install ReferralHero.

Step 3: Add an Embed element by clicking the + icon and selecting Code Embed.

Step 4: Drag the Embed element to the exact spot where you want the widget to appear.

Step 5: In the Embed code editor, paste <div id='referralhero-dashboard-MFxxxxxxxxxx'>/div>

Step 6: Save your changes and publish the website. The embedded widget should now appear on your selected page.

Adding ReferralHero Custom Tracking to Webflow Forms

Step 1: After adding the ReferralHero tracking code, go to the Webflow dashboard, select your project, and enter Designer Mode.

Step 2: Navigate to the page containing the form where you want to apply the ReferralHero custom tracking method.

Step 3: Click on the form to select it, then select each input field (like Name, Email, and Phone) individually.

Step 4: With a field selected, go to the Element Settings panel (usually found on the right side of the screen).

Step 5: Under the ID section, enter a unique ID for each field. For example:

• Set the ID of the email field to email-field.

• Set the ID of the name field to name-field.

• Set the ID of the phone field to phone-field.

• Set the ID of the submit button to Submit.

Step 6: Once the IDs are set, go to Page Settings > Custom Code.

Step 7: In the Head Code section, add the following JavaScript code. This script waits until the page is fully loaded, captures the form data on submit, and then sends it to ReferralHero:

Important:

• Replace RH_MFxxxxxxxxx with your actual ReferralHero campaign ID.

• Confirm that signup-form matches the ID of your form in Webflow. Adjust as necessary if your form has a different ID.

• To learn more about ReferralHero JavaScript custom methods, Click here.

Step 8: Save your changes and publish the site. This code will intercept the form submission, capture the data from each field, and send it to ReferralHero using the custom method.