Webflow
Last updated
Last updated
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.
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.
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.
