Next.js

This guide covers Next.js 13+ with the App Router. Using Pages Router? The setup is similar — just add the script to _app.js instead.

Setup

Open your root layout

Find your root layout file at app/layout.tsx (or .jsx).

Import the Script component

import Script from 'next/script';

Add RevDock to the head

Place the script inside your <head> or at the end of <body>:

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

Deploy

Commit and push your changes. RevDock will be active on your next deployment.

The afterInteractive strategy loads the script after the page becomes interactive, which is ideal for non-critical scripts like widgets.

Using environment variables

For cleaner code, store your website ID in .env.local:

NEXT_PUBLIC_REVDOCK_ID=your_website_id

Then reference it in your layout:

<Script
  src="https://getrevdock.com/scripts/revdock.js"
  data-website-id={process.env.NEXT_PUBLIC_REVDOCK_ID}
  strategy="afterInteractive"
/>

Verify it's working

Deploy your changes
Visit your live site
Check the RevDock dashboard — widgets should appear within minutes