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
  • Adding the ReferralHero Tracking Code
  • Embedding the ReferralHero Widget
  • Adding ReferralHero Custom Tracking to Webflow Forms

Was this helpful?

  1. Integrate
  2. Platform-specific Instructions

Webflow

PreviousWordPressNextSquareSpace

Last updated 5 months ago

Was this helpful?

Adding the ReferralHero Tracking Code

Step 1: Log into 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 the 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.

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.

To learn more about ReferralHero JavaScript custom methods, Click .

here