# Referral quickstart: a no-code site Webflow, Framer, Bubble and the like: the tag in the site-wide code, your billing system, and signups from the builder's workflows. Referrals on a site built without code (Webflow, Framer, Bubble and the like): the tag in the site-wide custom code, your billing system connected, and, if people sign up on the site, signups sent from the builder's own workflows. ## Before you start - A key with the **Referral tracking** preset (the single scope `conversions:write`), made under **Settings, Developers**. Keep it on your server as `BOLTCLAW_API_KEY`, never in a browser or an app. - The program's id, on its **Setup** tab, as `BOLTCLAW_PROGRAM_ID`. ## 1. Put the tag on your site Add the version 2 tag to every page, in your root layout or template. It keeps a partner's code from `?via=

` in a first-party cookie on your own domain,
`bc_ref`, for the program's cookie window, and gives you
`BoltClawReferral.code()` in the browser.

```html

```

`data-payment-links="auto"` is only for Stripe Payment Links and the Buy Button;
`data-welcome="auto"` adds the friend's welcome. The tag makes no request at all
unless the welcome is on and the visitor arrived with a code.

## 2. Where the code lives

With no server of your own, the tag keeps the code in the browser. Safari
deletes a cookie a script created once the visitor has gone 7 days of browsing
without using your site, so a visitor who comes back after a week may arrive
without it; a
partner's **discount code** still credits them at checkout, on every billing
system that sends one. Where to paste the tag:

| Builder | Where |
|---|---|
| Webflow | Site settings, Custom code, Head code (published sites only) |
| Framer | Site settings, General, Custom code, End of head |
| Bubble | Settings, SEO and metatags, Script in the body |

## 3. Signups, if people sign up on your site

If people only buy at checkout, skip this: the setup status marks Signups as not
used when you answer "Only through checkout".

Otherwise send each signup from a workflow the builder runs on its server, never
from the page itself (a key in a page can be read by every visitor):

- **Bubble**: a backend workflow on sign-up, calling the API Connector with a
  private `Authorization: Bearer ` header, `POST`
  `https://api.boltclaw.ai/v1/referrals/conversions` and the body below. Pass the
  code into the workflow from the page with `BoltClawReferral.code()`.
- **Webflow or Framer with a membership or form tool**: send the tool's signup
  event to the same address from an automation (Zapier, Make, n8n) that holds
  the key.

```json
{
  "program_id": "",
  "event": "lead",
  "event_id": "signup-",
  "customer": { "id": "" },
  "referral": { "code": "" }
}
```

## Selling through Stripe Payment Links

The tag with `data-payment-links="auto"` (above) puts the partner's code on every
Stripe Payment Link and Buy Button on the page. Connect Stripe on the Setup tab
(one click with the Stripe App) and that is the whole integration: two steps.

## 4. Record sales

Connect the billing system you take payments with on the **Setup** tab (see
[Connect your billing system](https://boltclaw.ai/docs/referral-setup)), and pass the code to checkout
as its guide shows: sales, renewals and refunds are then reported for you, and
the setup status ticks them off. Not on one of the twelve? Report each sale from
your server with `event: "sale"`, your own `event_id` for the payment, the same
`customer.id` as the signup, `amount` in minor units and `currency`.

## 5. Send a test sale

Press **Send a test sale** on the Setup tab: a click, a signup, a sale with two
items and a partial refund go through your real rules as test data, credited to
the program's test partner, never paid and never counted. To check your own
wiring, send one of your own conversions with `"test": true`: it is test data
too, and **Clear test data** deletes it all. The setup status's rows turn green
only for live events.