> For the complete documentation index, see [llms.txt](https://berylsystems.gitbook.io/referral-hero-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://berylsystems.gitbook.io/referral-hero-documentation/integrations/platform-specific-integration/webflow.md).
# 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**
**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 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>`
**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:
{% 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](/referral-hero-documentation/integrations/javascript-web-api.md).
{% 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.
