> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traceten.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Add Traceten to Webflow via Project Settings Custom Code.

## What this lets you do

Track AI-referred traffic on every page of your Webflow site without touching individual page settings.

## Before you start

* Your Traceten site key, from **Sites → Install** in the [dashboard](https://app.traceten.com/dashboard).
* Access to the Webflow Designer for your project.
* A Webflow plan that supports Custom Code (Basic plan or higher).

## Steps

<Steps>
  <Step title="Open Project Settings">
    In the Webflow Designer, click the gear icon in the left panel to open **Project Settings**.

    Alternatively, go to your Webflow dashboard, find your project, and click **Settings**.
  </Step>

  <Step title="Go to the Custom Code tab">In Project Settings, click the **Custom Code** tab.</Step>

  <Step title="Paste the snippet into Head Code">
    Find the **Head Code** section. Paste your snippet tag there:

    ```html theme={null}
    <!-- Traceten AI traffic attribution -->
    <script
      async
      src="https://cdn.traceten.com/tt.min.js"
      data-site="ttid_7Rb4TrC1dTbnD8w3s1TS12"
      data-cookie-domain="example.com"
    ></script>
    ```

    Copy the whole tag from **Sites → Install** for your site so `data-site` (your site key) is already yours. `data-cookie-domain` is your own domain, which keeps one visitor as one visitor across your subdomains. It's off by default, so it only appears on the tag once you've confirmed a value under **Sites → Settings → Cookies**.

    The Head Code section injects the code into the `<head>` of every page on your site.
  </Step>

  <Step title="Save Changes">Click **Save Changes** at the top of the Project Settings panel.</Step>

  <Step title="Publish your site">
    Go back to the Designer and click **Publish**. Select your published domain and click **Publish to selected domains**.

    The snippet will be live on your published domain after this step. It does not appear in the Designer preview.
  </Step>
</Steps>

## Verify installation

Open your published Webflow site in a browser, then open **Sites → Install** in the [dashboard](https://app.traceten.com/dashboard) and look at the **Verify** step. It should turn green within 30 seconds of a pageview.

<Warning>
  The snippet does not fire in the Webflow Designer preview. You must publish to your domain and
  visit the live site.
</Warning>

## Notes

**Staging domain vs. custom domain.** Webflow provides a free `.webflow.io` staging domain. If you create a separate Traceten site for staging, use that site's key on staging and your production key on your custom domain.

**Per-page custom code.** Webflow also supports adding custom code to individual pages via Page Settings. This is useful if you want to track a specific landing page before rolling out site-wide. Navigate to the page, open Page Settings, and paste the snippet in the **Before `</body>` tag** section (or **Before `</head>` tag** for `<head>` placement).

**Webflow ecommerce.** Traceten tracks traffic attribution, not purchase events. For revenue attribution via Shopify, see the [Shopify integration](/integrations/shopify).

## Next steps

* [Verify the snippet is firing](/install/verify)
* [Troubleshooting](/install/troubleshooting)
