Add Velo
to Next.js.

Three steps · about five minutes

1. 01

   Copy the line

   Copy the complete installation snippet for this site from your Velo dashboard. The example below shows the format; replace your-site-id before using it. Keep the API endpoint supplied by your dashboard.

   Copy example<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script>
2. 02

   Paste it into your root layout

   With the App Router, open the root layout, app/layout.tsx or src/app/layout.tsx, add a <head> element above <body> if there is none, and paste your complete Velo snippet inside it, above any analytics or advertising tags. With the Pages Router, paste it inside <Head> in pages/_document.tsx, creating that file if the project has none. The snippet is valid JSX as it stands. Keep it out of useEffect and out of next/script with the default strategy, which both load it after your other tags can fire. Deploy, then test a page reached through a Link as well as a full reload.

   Next.js · root layout

   // app/layout.tsx on the App Router. On the Pages Router, the same
   // line goes inside <Head> in pages/_document.tsx.
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head>
           {/* Paste the complete Velo snippet from your dashboard here. */}
           <script src="https://cdn.veloconsent.com/v1/velo.js"
                   data-api="https://app.veloconsent.com"
                   data-velo-site="your-site-id" async></script>
         </head>
         <body>{children}</body>
       </html>
     );
   }

3. 03

   Publish and check the live site

   Save and publish the change using the platform steps above, then clear any site or CDN cache. Open the published URL in a fresh browser session. Check the banner where your region rules require it, test accepting and rejecting, and verify consent defaults and updates before your measurement tags run. Confirm the site appears as installed in your Velo dashboard.