Talivia Docs
Talivia Docs
HomeDashboard
IntroductionInstallationGetting updates
Next.jsReactVueNuxtAngularSvelteKitAstroRemixSolidStartQwikGatsbyExpoLaravelDjangoRuby on RailsExpressNestJSFlaskPhoenixWordPressShopifyWixWebflowSquarespaceFramerTilda
Installation

Next.js

Install Talivia in a Next.js app with a root layout.

Use the root layout so the tracker loads on every route.

App Router

Open app/layout.tsx and add next/script.

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://talivia.com/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace the website ID. Use the ID from Talivia Settings -> Tracking for this exact website.

Pages Router

If your app uses pages/_document.tsx, place the script before </body>.

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <script defer src="https://talivia.com/script.js" data-website-id="YOUR_WEBSITE_ID" />
        <NextScript />
      </body>
    </Html>
  );
}

Verify

Run the app, open a page, then return to Talivia and check for a new session.

Getting updates

Previous Page

React

Install Talivia in a React single-page app.