Next.js

Use the App Router root layout or a client wrapper to load the SDK exactly once.

App Router

Add next/script in your root layout so the SDK loads on every page.
Keep the script key in an environment variable exposed to the browser (NEXT_PUBLIC_…).

Example with next/script

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v11/sdk/dist/tourkit.min.js"
        data-key="YOUR_SCRIPT_KEY"
        data-api="https://tourkit-phi.vercel.app"
        strategy="afterInteractive"
      />
    </>
  )
}

App Router Setup

Next.js App Router uses client-side navigation. Add a TourKitProvider to your root layout:

// app/components/TourKitProvider.jsx
'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export default function TourKitProvider() {
  const pathname = usePathname()

  useEffect(() => {
    const timer = setTimeout(() => {
      window.TourKit?.startFor(pathname)
    }, 500)
    return () => clearTimeout(timer)
  }, [pathname])

  return null
}

Add to your root layout.js:

import TourKitProvider from './components/TourKitProvider'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TourKitProvider />
        {children}
      </body>
    </html>
  )
}