Añade Velo
a Next.js.

Tres pasos · unos cinco minutos

1. 01

   Copia la línea

   Copia desde tu panel de Velo el fragmento de instalación completo de esta web. El ejemplo de abajo solo muestra el formato: sustituye your-site-id antes de usarlo. Deja el endpoint de la API tal como te lo da el panel.

   Copiar ejemplo<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

   Pégala en tu layout raíz

   Con el App Router, abre el layout raíz, app/layout.tsx o src/app/layout.tsx, añade un elemento <head> encima de <body> si no lo hay y pega dentro tu fragmento completo de Velo, encima de cualquier etiqueta de analítica o publicidad. Con el Pages Router, pégalo dentro de <Head> en pages/_document.tsx, y crea ese archivo si el proyecto no lo tiene. El fragmento es JSX válido tal como está. No lo cargues desde useEffect ni con next/script con la estrategia por defecto: ambos lo cargan cuando tus otras etiquetas ya pueden dispararse. Despliega y prueba una página a la que llegues con un Link, además de una recarga completa.

   Next.js · layout raíz

   // 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

   Publica y compruébalo en producción

   Guarda y publica el cambio siguiendo los pasos de tu plataforma que tienes arriba, y vacía la caché de la web o del CDN. Abre la URL publicada en una sesión nueva del navegador. Comprueba que el banner aparece donde lo exigen tus reglas por región, prueba a aceptar y a rechazar, y verifica que los valores por defecto y las actualizaciones del consentimiento se aplican antes de que se ejecuten tus etiquetas de medición. Confirma que tu web aparece como instalada en el panel de Velo.