# 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**

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FSE9j2Hq2EEYhOX8cMlU8%2Fimage.png?alt=media&#x26;token=a6bcc6f2-ba1d-4077-afef-847988c1d94d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FwK1ueu9oYENF5yEwJx2A%2FScreenshot%202024-11-05%20at%2010.07.36%E2%80%AFPM.png?alt=media&#x26;token=6f79ef33-9c4c-4de0-9afd-cbc566bdd266" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FZW4MmMADFA4B4pBDayFI%2FScreenshot%202024-11-05%20at%2010.20.50%E2%80%AFPM.png?alt=media&#x26;token=2dbcc1f9-81cc-492e-93e0-0fc26c75a219" alt="" width="253"><figcaption></figcaption></figure>

**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>`

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FkGkGI6Xlv9uOT47sBKtS%2FScreenshot%202024-11-05%20at%2010.26.26%E2%80%AFPM.png?alt=media&#x26;token=40b2c9cb-5b99-4725-ac99-f2fd25470d03" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FP16LMPbATN6YFUmDLk7H%2FScreenshot%202024-11-05%20at%2011.37.22%E2%80%AFPM.png?alt=media&#x26;token=bc660fb4-47da-4f7d-8163-6eca95037ac8" alt="" width="242"><figcaption></figcaption></figure>

**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:

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FPS6l1eZy1CTJ5DIXAjjo%2FScreenshot%202024-11-05%20at%2011.55.10%E2%80%AFPM.png?alt=media&#x26;token=06d7a67a-cb53-4891-b2b5-6ae21b4b9226" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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](../javascript-web-api).
{% endhint %}

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

