Vanila JS

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',environment:'production'};
    ['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 Utilities → Environment (site token) in your dashboard. Set environment to production or development.

Always set environment. Only "production" and "development" are accepted. If omitted, events default to development.

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',environment:'production'};
    ['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>

LLM Prompt

Paste this into your coding assistant to install Tracelit for you:

Install Tracelit on my plain HTML site.
Insert this exact script right before </head>. Replace YOUR_TOKEN_HERE and set environment to production (or development for local):
<script>
  !function(w,d){
    var t=w.__tl={_q:[],token:'YOUR_TOKEN_HERE',environment:'production'};
    ['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>
Then show changed files and a quick verification checklist.

What’s next?

Topic	Description	Guide
Identify users	Full guide to linking sessions to real users.	Read
Feature tagging	Tag flows in session replays.	Read

Frontend

Backend

Adding user identity

Pin to a specific version

Strict CSP (rrweb bundled in)

LLM Prompt

What’s next?

​Adding user identity

​Pin to a specific version

​Strict CSP (rrweb bundled in)

​LLM Prompt

​What’s next?

Adding user identity

Pin to a specific version

Strict CSP (rrweb bundled in)

LLM Prompt

What’s next?