Docs

Webflow and plain HTML

Install

Webflow: Site settings → Custom code → Head code (site-wide), then Publish. Plain HTML: into the <head> of every page or your shared header include.

index.html
<script>window.x3=window.x3||function(){(window.x3q=window.x3q||[]).push(arguments)}</script>
<script async src="{{API_ORIGIN}}/v1/s/x3.full.js?k={{PUBLISHABLE_KEY}}" data-key="{{PUBLISHABLE_KEY}}"></script>

Verify

  1. Publish, open the live site (Webflow's designer preview is an iframe – 3x ignores iframes).
  2. POST {{API_ORIGIN}}/v1/e → 204 in the network tab.
  3. Check the dashboard's install page for the live pageview.

Proxy (optional)

Webflow cannot run server code, so the proxy runs in front of it:

  • Cloudflare Worker on the zone (recommended): Cloudflare Worker proxy.
  • CNAME subdomain such as t.example.com pointing at 3x – no code, first-party by host, but some blockers uncloak CNAMEs: CNAME.

After setting up the worker on {{PROXY_PATH}}:

index.html
<script async src="{{PROXY_PATH}}/v1/s/x3.full.js?k={{PUBLISHABLE_KEY}}" data-key="{{PUBLISHABLE_KEY}}" data-host="{{PROXY_PATH}}"></script>

If the consent tool exposes a JavaScript callback, call 3x from it:

index.html
<script>
  window.addEventListener("consent-accepted", function () { x3("consent", "granted"); });
  window.addEventListener("consent-declined", function () { x3("consent", "denied"); });
</script>

Common CMPs (Cookiebot, Usercentrics, Complianz, Borlabs, Google Consent Mode) work without code when selected in the project's consent settings (Consent).

Events

Webflow: select an element → Settings → Custom attributes → name data-x3-event, value pricing_click; add data-x3-prop-position = hero for a prop. Plain HTML:

index.html
<a href="/pricing" data-x3-event="pricing_click" data-x3-prop-position="hero">Pricing</a>
<a href="/contact" data-x3-cta>Talk to sales</a>

Webflow forms are measured automatically (start, submit, abandon). Name them with a data-x3-form attribute for readable reports.