# Webflow

> The tracking code in the site's Custom code and one line on the Order Confirmation page – no template variables needed.

Webflow has no template variables, and the sale doesn't need any: the line on the order confirmation page reads the order number from the page address and the amount from an element on the page.

In Setup, Webflow sits under **Other**. Choose **Other** and press **Show the Webflow guide**.

## Before you start

- A paid Webflow site plan – custom code isn't available on the free plans.
- Access to the site in the Webflow Designer.
- Your store ID. The snippets under **Program → Setup** already have it filled in; on this page it appears as the placeholder `DIN_BUTIK`.

## 1. The tracking code on the whole site

Open **Site settings → Custom code**, paste the script into the **Head code** field and click **Save changes**. The affiliate click is then remembered across the whole site.

```html title="Site settings → Custom code → Head code"
<script src="https://app.affilyflow.com/t/DIN_BUTIK.js" async></script>
```

## 2. The sale on the order confirmation page

1. Open the **Order Confirmation** page in the Designer.
2. Select the text that shows the order **subtotal** and give it the ID `af-total` under **Element settings → ID**.
3. Paste the line under **Page settings → Custom code → Before `</body>` tag**.

```html title="Order confirmation → Before </body>"
<div hidden data-affilyflow-order="?orderId" data-affilyflow-total="#af-total" data-affilyflow-vat="25"></div>
```

The order number is read from the `orderId` parameter in the page address, and the amount from the element with the ID `af-total` once the page has shown it. The tracking code waits up to 20 seconds for both to appear.

- `data-affilyflow-vat="25"` deducts 25 % VAT. Remove it if your prices exclude VAT.
- Shipping is not part of the subtotal.
- If you sell in a currency other than Danish kroner, add e.g. `data-affilyflow-currency="EUR"`.

Every attribute is described in [The sale line](https://www.affilyflow.com/en/docs/reference/sale-line).

## 3. Publish and test

Click **Publish** – custom code only goes live once the site is published. Then go to the **Test tracking** step in Setup, press **Open test link**, place a test order in the tab that opens, and stay on the page. The live test shows the test click and the purchase with order number and amount, and asks whether the amount is right.

| What you see | Cause |
|---|---|
| The console says "data-affilyflow-order must be the order number" | The order confirmation address has no `orderId`. |
| The console says "data-affilyflow-total must be the amount" | No element has the ID `af-total`, or it showed no amount within 20 seconds. |

More in [Testing and troubleshooting](https://www.affilyflow.com/en/docs/store/testing-and-troubleshooting).

## Lead programs

If the program pays per sign-up, don't use the sale line. There are two ways:

- **Automatic lead tracking (recommended).** Enter the path of your thank-you page (e.g. `/thanks`) under **Automatic lead tracking** in Setup, and copy the tracking code again. It now carries the thank-you page address (`data-lead-url`) and counts leads by itself – no more code on the thank-you page.
- **Lead script on the thank-you page.** If you leave the field empty, Setup shows a small lead script instead. It must only go on the thank-you page (**Page settings → Custom code → Before `</body>` tag**) – not in the site-wide footer under Site settings, or leads are counted on every page.

Source: https://www.affilyflow.com/en/docs/store/webflow