Next.js (App Router)

Render the loader script in your layout; Next.js downloads and runs it in the visitor’s browser. Do not import the recorder JavaScript as a server module.

Root layout

// app/layout.tsx
import Script from 'next/script';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  const agentUrl = process.env.NEXT_PUBLIC_SESSIONLY_AGENT;
  const siteToken = process.env.NEXT_PUBLIC_SESSIONLY_TOKEN;
  return (
    <html lang="en">
      <body>
        {children}
        {agentUrl && siteToken ? (
          <Script
            src={agentUrl}
            data-site-token={siteToken}
            strategy="afterInteractive"
            crossOrigin="anonymous"
          />
        ) : null}
      </body>
    </html>
  );
}

Environment variables

NEXT_PUBLIC_SESSIONLY_TOKEN=YOUR_SITE_TOKEN
NEXT_PUBLIC_SESSIONLY_AGENT=https://app.sessionly.cloud/agent/loader.js

Copy your site token from the Setup wizard. If you self-host Sessionly AI, replace the agent URL with your own HTTPS Sessionly AI origin.

SSR-safe usage

Use afterInteractive for the permanent loader. It forwards the site token to the current recorder release automatically.

Preview & production origins

Add each deployment origin to allowed domains — e.g. https://myapp.vercel.app and https://myapp.com are separate origins.

Keep your app assets separate

/_next assets are served by your Next.js application, not by Sessionly AI. If your own reverse proxy rate-limits those assets, configure that proxy separately; Sessionly AI’s host only serves the loader and ingest APIs.

Verify

Deploy preview → open the site → confirm the first recording in Sessions (sign in required).