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

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