Docs · Trace

After purchase, open Trace → Install and copy your personalised snippet. Replace YOUR_SITE_ID below with the ID from the app.

Plain HTML

Paste the script tag immediately before </body> in each HTML file.

index.html

<script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
></script>

React / Vite

Open index.html in your project root and paste the script before </body>.

index.html

<script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
></script>

Next.js App Router

Add to app/layout.tsx inside <body>, after {children}.

app/layout.tsx

import Script from 'next/script'

// Inside app/layout.tsx, after {children}:
<Script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
  strategy="afterInteractive"
/>

Next.js Pages Router

Add to pages/_app.tsx using next/script. Use one file only — _app.tsx is usually enough.

pages/_app.tsx

import Script from 'next/script'

// Inside app/layout.tsx, after {children}:
<Script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
  strategy="afterInteractive"
/>

WordPress

Paste before </body> in footer.php (child theme recommended), or use a footer plugin like "Insert Headers and Footers".

footer.php

<script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
></script>

Shopify / Webflow / Framer

Paste in your platform custom code area before </body>. Webflow: Project Settings → Custom Code → Footer. Shopify: theme.liquid before </body>. Framer: Site Settings → Custom Code → End of body.

Footer custom code

<script
  src="https://cdn.gettrace.uk/trace.js"
  data-site-id="YOUR_SITE_ID"
  data-api-url="YOUR_SUPABASE_URL"
  data-api-key="YOUR_SUPABASE_ANON_KEY"
></script>

Troubleshooting

No events appearing

Confirm the script loads (check Network tab for trace.js). Verify data-site-id matches your site in Trace. Visit the live site and click a few times — events can take a few seconds to flush.

Preview blocked in Trace

Some sites block iframe embedding. Install the snippet and open your site in a normal browser — events still reach Trace. Upload a screenshot in the app to align the heatmap.

Wrong site ID in snippet

Each site in Trace has a unique ID. Copy the snippet from the Install view in the app — do not reuse snippets across sites.