Install the tracker

The Replayful tracker is a single script tag — 23 KB gzipped over the wire (around 70 KB unminified), loaded asynchronously. It records the page as soon as it executes and starts streaming events to our ingest endpoint.

Get your snippet

Open any project in Replayful, click the Install tab, and copy the snippet shown there. It looks like this:

<script src="https://app.replayful.co/api/t.js"
        data-site="YOUR_SITE_KEY"
        async></script>

The data-site attribute identifies which project recordings land in. The key is unique per project, never share it between sites.

Where to paste it

Put it as high in <head> as possible, above any analytics or A/B testing tags, so the first paint is captured. Putting it in the body works, but you lose the moments before the tracker loaded.

Framework-specific notes

Next.js (App Router)

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://app.replayful.co/api/t.js"
          data-site="YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

WordPress

Paste the raw <script> tag into header.php inside <head>, or use a plugin like Insert Headers and Footers and add it to the header.

Static HTML

Paste the snippet inside <head> of every page you want recorded. If you have a templated header, paste it once there.

Domain allowlist

Replayful only accepts events from the domain you registered when you created the project. Subdomains aren't included by default , register them as separate projects if you want them captured independently.

Verifying the install

Load any page on your site with the tag installed.
Open Replayful, go to that project's Sessions tab, and refresh.
A new session should appear within about 30 seconds.

Nothing showing? Head to Verify recording works.