Adicione o Velo
ao Astro.
Instale o banner de cookies do Velo e o Google Consent Mode v2 no Astro com uma linha no seu layout compartilhado. A maioria das instalações leva poucos minutos quando você já tem acesso ao código do site. Se você usa Google Tag Manager, esse caminho também está nesta página.
Instruções e fontes das imagens revisadas em 7 de novembro de 2026.
Cole uma linha
no seu layout.
Adicione o trecho de código do seu site ao head global do site, depois publique e teste o resultado. Se as suas tags de medição já rodam pelo Google Tag Manager, use o caminho abaixo.
Já usa o Google Tag Manager? Esqueça o código e faça por lá ↓
Três passos · cerca de cinco minutos
-
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.
<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> -
02
Cole no seu layout compartilhado
No layout que todas as páginas compartilham, normalmente src/layouts/Layout.astro, cole o trecho de código completo do Velo dentro de <head>, acima de qualquer tag de análise ou publicidade, e adicione is:inline à tag script para que o Astro a deixe exatamente como está. Se o layout usa <ClientRouter />, o Astro substitui o body a cada navegação, o que remove o banner: no mesmo head, adicione um script is:inline que guarde #velo-banner-host e #velo-reopener-host em astro:before-swap e os adicione a document.body em astro:after-swap. Faça o build e o deploy.
Astro · layout compartilhado
<!-- src/layouts/Layout.astro: the layout every page shares --> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Paste the complete Velo snippet from your dashboard here, then add is:inline. --> <script is:inline src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> <!-- Only if this layout uses <ClientRouter />: keeps the banner across page swaps. --> <script is:inline> document.addEventListener('astro:before-swap', () => { window.veloHosts = [...document.querySelectorAll('#velo-banner-host, #velo-reopener-host')]; }); document.addEventListener('astro:after-swap', () => { document.body.append(...window.veloHosts); }); </script> </head> <body> <slot /> </body> </html>Referência de configuração verificada · 7 de novembro de 2026 Referência de configuração conferida com a documentação da plataforma. Não é uma captura de tela do painel administrativo.
Documentação da plataforma ↗ -
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.
Captura da interface no ar · 23 de setembro de 2026 O banner real em veloconsent.com, capturado em 23 de setembro de 2026. O texto, o layout e as configurações regionais do seu banner podem ser diferentes.
Site do Velo no ar ↗Ver em tamanho real ↗
Usa ClientRouter? O Astro substitui todo o body da página a cada navegação, o que remove o banner e o botão que o reabre. Adicione o segundo script curto mostrado no passo 2 e os dois ficam. Sem ClientRouter, cada link é um carregamento completo da página e o script não é necessário.
Ainda comparando opções? Veja todas as plataformas compatíveis.
Usa o Tag Manager?
Esqueça o código.
Se o Google Tag Manager já está no seu site, esta é a forma mais fácil de adicionar o Velo. Você não mexe em código, são quatro passos curtos e todas as suas tags ficam em um só lugar.
- 01
Adicione o Velo ao Tag Manager
Abra o template do Velo, clique em Add to workspace e escolha o seu contêiner.
Abrir o template do Velo ↗ - 02
Cole o ID do seu site
No Tag Manager, abra Tags e clique em New. Clique em Tag Configuration, escolha Velo CMP e cole o ID do seu site. Você encontra esse ID no seu painel do Velo. Deixe todo o resto como está.
- 03
Faça carregar primeiro
Clique em Triggering, escolha Consent Initialization – All Pages e clique em Save. Assim o Velo começa antes das suas outras tags.
- 04
Publique e confira
Clique em Submit e depois em Publish. Só o Preview não coloca o Velo no ar. Depois abra o seu site em uma janela anônima, teste o banner e confira se o site aparece como instalado no seu painel do Velo.
Usa ClientRouter? Você ainda precisa do script curto dos passos do Astro acima; sem ele, o banner some quando os visitantes mudam de página.
Perguntas sobre o Astro,
respondidas.
O que os times que instalam no Astro perguntam primeiro.
Para quais sites Astro isto serve?
Qualquer projeto Astro com um layout compartilhado, estático ou renderizado no servidor, porque a tag fica no HTML que o layout gera. Testamos os passos no Astro 7 com saída estática.
Preciso adicionar is:inline?
É a opção segura. O Astro deixa como está qualquer script com atributos além de src, então o trecho já fica intacto, e is:inline diz isso de forma explícita. Mantenha os atributos data exatamente como o seu painel mostra.
O banner some quando clico em um link.
É o ClientRouter substituindo o body da página na navegação. Adicione o segundo script do passo 2 ao mesmo head, e o banner e o botão que o reabre passam para cada nova página. O transition:persist do Astro não ajuda aqui, porque o Velo adiciona esses elementos depois que a página carrega.
Meu site tem mais de um layout.
Coloque o trecho no layout base que os outros envolvem. Se os seus layouts não compartilham nenhum, adicione a cada um. O Velo ignora uma segunda cópia na mesma página, mas confira se todas as seções do site mostram o banner.
Isso deixa o site mais lento?
O trecho de código do painel carrega de forma assíncrona. Como com qualquer script, meça o efeito dele no seu site e confira a ordem das suas tags; o carregamento assíncrono, por si só, não garante que os padrões de consentimento rodem antes das outras tags.
Um assistente de IA pode fazer isso por mim?
Sim. Copie o prompt em Instalar com agentes, logo abaixo, no Claude, ChatGPT, Cursor ou no assistente que você já usa. Ele carrega os passos desta página, a ordem em que as tags precisam carregar e as verificações que o agente tem que rodar antes de dizer que terminou.
Ou entregue
para um agente.
Copie o prompt no Claude, ChatGPT, Cursor ou no assistente que você já usa. Ele carrega tudo o que está nesta página: os dois caminhos, a ordem em que as tags precisam carregar e as verificações que provam que deu certo.
Cole este prompt no seu assistente e depois informe o ID do seu site e o trecho de instalação completo ou as configurações do GTM que estão no seu painel do Velo.
Trabalhando com um agente que lê a web? Aponte ele para veloconsent.com/llms.txt e /install.md para o mesmo contexto em texto puro.
Do diário.
© 2026 por
