> For the complete documentation index, see [llms.txt](https://support.referralhero.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.referralhero.com/integrate/platform/webflow.md).

# Webflow

## Adding the ReferralHero Tracking Code <a href="#adding-the-referralhero-tracking-code" id="adding-the-referralhero-tracking-code"></a>

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

<figure><img src="/files/aoxsopM7445qheUSbGfW" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/WIRErdrj14rLaVbIofz1" alt=""><figcaption></figcaption></figure>

## Embedding the ReferralHero Widget <a href="#embedding-the-referralhero-widget" id="embedding-the-referralhero-widget"></a>

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

<figure><img src="/files/D52fbVLoZCUyBjc7qIbP" 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="/files/PtJWFrmBsoZCeqgBLqmF" 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 <a href="#adding-referralhero-custom-tracking-to-webflow-forms" id="adding-referralhero-custom-tracking-to-webflow-forms"></a>

**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="/files/2hkMZrhBMfiaxqEPGfNQ" 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="/files/enjQsuMGPAkeIZcRN1bk" 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](https://berylsystems.gitbook.io/referral-hero-documentation/integrations/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.