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.

HTML5 No npm. No build step. Paste this inside the <head> of every page and you’re done.
<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.app/t.js';d.head.appendChild(s);
  }(window,document);
</script>
Replace YOUR_TOKEN_HERE with the token from Settings → Site Token in your dashboard.
Any API calls you make (like __tl.identify()) before the SDK finishes loading are queued and replayed automatically — so you can call them on the very next line.

Adding user identity

<script>
  fetch('/api/me').then(r => r.json()).then(user => {
    __tl.identify(user.id, { email: user.email, plan: user.plan })
  })
</script>

Pin to a specific version

Use this when you want to lock to a specific release and never receive automatic updates:
<script src="https://cdn.tracelit.app/t@1.2.6.js" async></script>

Strict CSP (rrweb bundled in)

If your Content Security Policy blocks dynamically injected <script> tags, use the full bundle. It’s larger (~60 KB gzipped vs < 20 KB) but loads no additional scripts at runtime:
<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.app/t.full.js';d.head.appendChild(s);
  }(window,document);
</script>

Install with AI (Bolt, Lovable, Replit)

Bolt logo

Lovable logo

Replit logo
Install Tracelit on my plain HTML site.
Insert this exact script right before </head> and replace YOUR_TOKEN_HERE:
<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>
Then show changed files and a quick verification checklist.

What’s next?

Identify users

Link sessions to real users after login.

Feature tagging

Mark flows like checkout or onboarding in replays.