Skip to main content

Next.js Installation

Install Told in your Next.js application using the next/script component.

App Router​

Add the Told script to your root layout (app/layout.js or app/layout.tsx):

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://scripts.told.club/sdk/sdk.js"
          strategy="afterInteractive"
          onLoad={() => {
            told('init', 'YOUR_SOURCE_ID');
          }}
        />
      </body>
    </html>
  );
}

Replace YOUR_SOURCE_ID with your Source ID from the Told dashboard.

Pages Router​

Add the Told script to your _app.js or _app.tsx:

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://scripts.told.club/sdk/sdk.js"
        strategy="afterInteractive"
        onLoad={() => {
          told('init', 'YOUR_SOURCE_ID');
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

Identify users​

Create a client component to identify users after authentication:

'use client';

import { useEffect } from 'react';

export function ToldIdentify({ user }) {
  useEffect(() => {
    if (typeof window !== 'undefined' && typeof told !== 'undefined' && user) {
      told('identify', {
        email: user.email,
        userId: user.id,
        name: user.name,
      });
    }
  }, [user]);

  return null;
}

Then use it in your layout or page:

<ToldIdentify user={session?.user} />
info

The typeof told !== 'undefined' check prevents errors during server-side rendering. The SDK only runs in the browser.