Adicione o Velo
ao Next.js.

Três passos · cerca de cinco minutos

1. 01

   Copie a linha

   Copie o trecho de código de instalação completo deste site no seu painel do Velo. O exemplo abaixo mostra o formato; substitua your-site-id antes de usá-lo. Mantenha o endpoint da API fornecido pelo seu painel.

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

   Cole no seu layout raiz

   Com o App Router, abra o layout raiz, app/layout.tsx ou src/app/layout.tsx, adicione um elemento <head> acima de <body> se não houver um e cole dentro dele o trecho de código completo do Velo, acima de qualquer tag de análise ou publicidade. Com o Pages Router, cole dentro de <Head> em pages/_document.tsx, criando esse arquivo se o projeto não tiver um. O trecho é JSX válido como está. Não o carregue em useEffect nem com next/script na estratégia padrão: os dois o carregam quando suas outras tags já podem disparar. Faça o deploy e teste uma página aberta por um Link, além de um recarregamento completo.

   Next.js · layout raiz

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

   Publique e confira o site no ar

   Salve e publique a mudança seguindo os passos da plataforma acima e depois limpe qualquer cache do site ou da CDN. Abra a URL publicada em uma sessão nova do navegador. Confira o banner onde as suas regras de região o exigem, teste aceitar e recusar e verifique os padrões e as atualizações de consentimento antes de as suas tags de medição rodarem. Confirme que o site aparece como instalado no seu painel do Velo.