Skip to content
pisi.to
All guides

Next.js

With next/script, on App Router or Pages Router.

  1. App Router: put the Script in the root layout

    The afterInteractive strategy loads the key once the page is usable, which is exactly what you want.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          defer
          data-domain="example.com"
          src="https://pisi.to/js/llave.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
    tsx

  2. Pages Router: in _document

    If you still live in pages/, it goes in the document, inside <Head>.

    // pages/_document.tsx
import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script defer data-domain="example.com" src="https://pisi.to/js/llave.js" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
    tsx

  3. Deploy

    You will see nothing in development: the key deliberately does not fire on localhost (§4.4).

Check that it works

Open your site in a new tab and watch the dashboard: you should show up under "home right now" in under ten seconds. If you do not, run through the onboarding checklist.