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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.referralhero.com/integrate/platform/webflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.