Next.js

Install tokwork in Next.js applications (App Router & Pages Router).

Install tokwork in Next.js

Compatible with both App Router (Next.js 13+) and Pages Router.

App Router (Next.js 13+)

Option 1: Using Script Component (Recommended)

Add the script in your root layout:

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* tokwork Widget */}
        <Script
          src="https://js.tokwork.com/loader.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-website-domain="yourdomain.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Option 2: Using Metadata API

For more control, use the metadata API:

app/layout.tsx

export const metadata = {
  // ... other metadata
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          async
          src="https://js.tokwork.com/loader.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-website-domain="yourdomain.com"
        />
      </body>
    </html>
  )
}

Pages Router

Add to _document.tsx

pages/_document.tsx

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

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        
        {/* tokwork Widget */}
        <Script
          src="https://js.tokwork.com/loader.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-website-domain="yourdomain.com"
          strategy="afterInteractive"
        />
      </body>
    </Html>
  )
}

Environment Variables (Optional)

For better management, use environment variables:

.env.local

NEXT_PUBLIC_TOKWORK_WEBSITE_ID=your-website-id
NEXT_PUBLIC_TOKWORK_DOMAIN=yourdomain.com

Then use them in your code:

<Script
  src="https://js.tokwork.com/loader.js"
  data-website-id={process.env.NEXT_PUBLIC_TOKWORK_WEBSITE_ID}
  data-website-domain={process.env.NEXT_PUBLIC_TOKWORK_DOMAIN}
  strategy="afterInteractive"
/>

Loading Strategies

Choose the right strategy for your needs:

afterInteractive (Recommended) - Load after page becomes interactive
lazyOnload - Load during idle time
beforeInteractive - Load before page becomes interactive (not recommended)

Verify Installation

Run your dev server: npm run dev
Visit http://localhost:3000
Check browser console for: ✅ tokwork Widget loaded successfully
Look for the widget popup

TypeScript Support

Add type definitions if needed:

declare global {
  interface Window {
    WOM_WIDGET_CONFIG?: Array<{
      websiteId: string
      backendUrl?: string
    }>
  }
}

Next Steps

HTML / Static Sites

Install tokwork in plain HTML websites.

Vue.js & Nuxt

Install tokwork in Vue.js and Nuxt applications.