All install guides

Install with an AI coding agent

Give Cursor, Claude Code, Lovable or v0 one prompt. The script is about 6 KB gzipped and loads asynchronously, so it won't hold up your pages.

1. Get your tracking ID

Create a free account, then add your site in the dashboard. It shows the prompt below with your own tracking ID filled in; the ID here is only an example.

2. The prompt

Add the Thravic analytics script to this website so it loads on every page.

## The script

<script async src="https://api.thravic.com/tf.js" data-tracking-id="TF-1A2B3C4D"></script>

Keep the src and data-tracking-id exactly as written, and keep `async`.

## How to add it

First find out how this project renders its pages, then use the matching method. Put it in the one shared place every page uses (root layout, base template, index.html), not in individual pages.

- Plain HTML site: inside <head> of every HTML page, or of the shared header/template if there is one.
- Next.js App Router (app/layout.tsx or .jsx): `import Script from 'next/script'` and add
  <Script src="https://api.thravic.com/tf.js" data-tracking-id="TF-1A2B3C4D" strategy="afterInteractive" />
  inside <body> of the root layout.
- Next.js Pages Router: add the plain <script> tag inside <Head> in pages/_document (create it if missing).
- React with Vite or Create React App, Vue with Vite, Angular, Svelte: index.html (src/index.html for Angular), inside <head>.
- Nuxt: in nuxt.config, app.head.script: [{ src: 'https://api.thravic.com/tf.js', async: true, 'data-tracking-id': 'TF-1A2B3C4D' }].
- SvelteKit: src/app.html, inside <head>.
- Astro: the shared layout component's <head>.
- Remix / React Router framework mode: the root route's <head> (app/root.tsx).
- Gatsby: gatsby-ssr with setHeadComponents.
- WordPress theme: hook into wp_head from the theme's functions.php (or header.php before </head>).
- Shopify theme: layout/theme.liquid, before </head>.
- Anything else: the template rendered on every page, inside <head>.

## Rules

- Add it exactly once. In single-page apps it belongs in the root layout or index.html, never in a component that renders on each route.
- Load it from the URL above. Do not download, copy, bundle or self-host tf.js — it is updated on our side.
- If the site sends a Content-Security-Policy (meta tag, server headers, next.config, vercel.json, netlify.toml, _headers, etc.), allow https://api.thravic.com in script-src and connect-src. Change nothing else in it.
- Do not add other analytics, cookies, cookie banners or consent code, and do not change unrelated files.
- Session recording, if the site owner turns it on in Thravic, asks visitors for consent itself and never records what they type. Do not add code for it. If pages show personal data on screen (account numbers, addresses, health or payment details), list those elements for me so I can decide whether to hide them with class "tf-mask" (hide text) or "tf-block" (leave out entirely) — don't add the classes yourself.

## When you're done

1. Tell me which file(s) you changed and show the diff.
2. Tell me how to check it after deploying: open the site with the browser's DevTools → Network tab, reload, and confirm tf.js loads (status 200) and a request goes to https://api.thravic.com/api/collect/TF-1A2B3C4D/batch within a few seconds.
3. Remind me to click "Verify installation" in the Thravic dashboard.

3. Add it

  1. Copy the prompt above.
  2. Paste it into your AI coding agent (Cursor, Claude Code, GitHub Copilot, Windsurf, Lovable, Bolt, v0, …) with your website project open.
  3. Review the change it makes — it should touch one shared file (plus your security policy if you have one).
  4. Deploy, then in your Thravic dashboard, open the site and click Verify Installation.

Data appears within a few minutes of your first visitor. Form inputs are masked in the browser before anything is sent.

Other platforms

WordPress · Shopify · Wix · Squarespace · Webflow · Framer · Ghost · Carrd · Bubble · Blogger · Joomla · Drupal · Tag Manager · Next.js · Other / HTML · React Native and Expo