Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tracelit.io/llms.txt

Use this file to discover all available pages before exploring further.

This guide uses the script tag approach — the fastest way to get Tracelit running on any site, including plain HTML, WordPress, Webflow, Shopify, or any CMS. If you’re using React, Next.js, Vue, or another framework, see the framework installation guide after reading this.

​
Step 1 — Get your token

Your site token is found in the Tracelit dashboard under Settings → Site Token. Tracelit dashboard Settings page showing the Site Token field
Don’t have an account yet? Sign up at tracelit.io — it’s free to get started.

​
Step 2 — Paste the script

Copy this snippet and paste it inside the <head> tag of every page on your site. Replace YOUR_TOKEN_HERE with the token you copied. 
<script>
  !function(w,d){
    var t=w.__tl={_q:[],token:'YOUR_TOKEN_HERE'};
    ['init','identify','reset','startReplay','stopReplay','optOut','optIn','destroy']
      .forEach(function(m){t[m]=function(){t._q.push([m,[].slice.call(arguments)])}});
    var s=d.createElement('script');s.async=!0;
    s.src='https://cdn.tracelit.io/t.js';d.head.appendChild(s);
  }(window,document);
</script>
The snippet loads asynchronously — it never slows down your page. Any API calls you make (like identify) before the SDK finishes loading are queued and replayed automatically.

​
Don’t want to edit <head> yourself? Use this AI prompt

If you’re a vibe coder, copy this prompt into Cursor, ChatGPT, Claude, or any coding assistant: 
Install Tracelit on my project.

Use this script snippet exactly and replace YOUR_TOKEN_HERE with my token:

<script>
  !function(w,d){
    var t=w.__tl={_q:[],token:'YOUR_TOKEN_HERE'};
    ['init','identify','reset','startReplay','stopReplay','optOut','optIn','destroy']
      .forEach(function(m){t[m]=function(){t._q.push([m,[].slice.call(arguments)])}});
    var s=d.createElement('script');s.async=!0;
    s.src='https://cdn.tracelit.io/t.js';d.head.appendChild(s);
  }(window,document);
</script>

Rules:
1) If this is plain HTML, insert it right before </head>.
2) If this is React/Next/Vue/Svelte/Angular, install @tracelit/tracker and initialize it in the app entry/root layout instead of manually editing raw HTML files.
3) Make only the minimal changes needed.
4) Show me exactly which file(s) you changed.
5) Then explain how I can verify Tracelit is working in under 30 seconds.
Replace YOUR_TOKEN_HERE before you run the prompt.

​
Step 3 — Verify it’s working

Open your site in a browser, click around for a few seconds, then head to your Tracelit dashboard. Tracelit dashboard showing the first session recorded after installing the script You should see:
  • A live visitor appear under Live Visitors
  • A new session appear in Sessions within a few seconds
  • Page views and clicks populating automatically
If you see data appearing — you’re done. Tracelit is now capturing page views, clicks, scroll depth, session replays, heatmaps, JS errors, API errors, and performance metrics automatically.

​
What’s next?

Using a framework?

See the React, Next.js, Vue, and other framework setup guides.

Identify your users

Link sessions to real users with one line of code.

Tag features in replay

Mark specific flows (checkout, onboarding) so you can filter and jump to them.

Understand your errors

Every error is linked to its session replay — see exactly what the user saw.