Consentl no Webflow

Adicione o loader do Consentl ao Head code do Webflow, transmita a escolha ao Webflow Analyze e saiba o que significa não estar em primeiro lugar no head.

Loader em primeiro lugar no <head>: Não — leia as limitações

O loader pode ficar em primeiro lugar no <head>? Não. O Webflow escreve o Head code de todo o site no fim do <head>, depois das suas próprias meta tags, CSS e pequenos scripts inline. O código ao nível da página vem depois do código de todo o site. Consulte Limitações.

Requisitos

Um Site plan pago, ou um Workspace Core, Growth, Agency ou Freelancer. Num site Starter gratuito, o separador Custom code é visível, mas não pode ser guardado.
A sua chave do site Consentl, na página Configuração do seu site no painel. Adicione todos os nomes de anfitrião em que o site funciona (o seu domínio personalizado e o endereço your-site.webflow.io) no campo Domínios; www. e o domínio sem www contam como o mesmo site, pelo que não é preciso adicionar www. separadamente.

O que inclui o seu plano Consentl

Free: apenas banner, registo de consentimentos e bloqueio manual.
Pro: acrescenta o Google Consent Mode v2.
Business: acrescenta o bloqueio automático de rastreadores conhecidos e as regras de bloqueio que acrescentar no painel.

Nos planos Free e Pro, só são retidas as tags que marcar manualmente.

Instalação

No Webflow, abra o site → Site settings → Custom code.
Em Head code, cole isto na primeira linha, acima de qualquer outro código já existente:
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Substitua SITE_KEY, e en pelo idioma do seu site (consulte Sites multilingues). Se o site também utilizar o modelo Consentl para o GTM, acrescente &gcm=ext ao URL para que só o modelo envie comandos do Consent Mode.
Clique em Save changes e depois em Publish para o seu domínio webflow.io e/ou personalizado.
Opcional: acrescente uma ligação «Definições de cookies» ao rodapé: um bloco Link com o URL #consentl. As ligações cujo URL termina em #consentl ou #consentl-preferences, e qualquer elemento com o atributo data-consentl-open, abrem as preferências.
Opcional: na página da sua política de cookies, acrescente um elemento Embed com a declaração de cookies:
```
<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>
```
Utilize data-consentl-request ou data-consentl-withdrawal em vez disso para o formulário de pedidos relativos a dados pessoais ou o formulário de livre resolução da UE. O formulário de livre resolução exige o plano Pro ou superior e tem de ser ativado no painel; caso contrário, fica vazio.

Verificar que funciona

Abra o site publicado numa janela privada: o banner aparece. O código personalizado não é executado na área de trabalho do Designer. É executado nos modos Preview e Comment, pelo que o banner também pode aparecer aí; o site publicado é o teste fiável.

A região do visitante é determinada a partir do seu endereço IP: o Consentl consulta o país em memória em cada visualização de página (nada é guardado) e aplica a regra do painel para esse país. Os estados dos EUA não são distinguidos: os visitantes dos EUA recebem a sua regra para todos os EUA ou, se não existir, a sua primeira regra para um estado dos EUA. Um país desconhecido recebe a sua regra para regiões desconhecidas (opt-in por predefinição).

Sites multilingues (Webflow Localization)

Desde 26 de junho de 2026, o Webflow Localization permite definir o código personalizado do Head e do Footer por locale. Acrescente o loader ao Head code de cada locale com o idioma desse locale em &l= (por exemplo, &l=de para o locale alemão). Cada página carrega então um único URL do loader, igual em todas as páginas desse locale.

Se preferir um único fragmento para todos os locales, omita &l=…: o banner utiliza então o idioma predefinido do site definido no painel.

Webflow Analyze / Optimize

As estatísticas próprias do Webflow têm um interruptor de consentimento separado:

Defina Insights → Settings → Tracking como Don't track by default e depois publique o site. A definição só produz efeito após a publicação.

Transmita a escolha do Consentl acrescentando isto ao Footer code. Aplica a escolha atual em cada carregamento de página e acompanha as alterações posteriores:

<script>
  (function () {
    function sync(c) {
      if (!c || !window.wf) return;
      wf.ready(function () {
        var want = c.analytics ? "allow" : "deny";
        if (wf.getUserTrackingChoice() === want) return;
        if (c.analytics) wf.allowUserTracking({ activate: true });
        else wf.denyUserTracking();
      });
    }
    if (window.Consentl) sync(window.Consentl.get());
    document.addEventListener("consentl:change", function (e) { sync(e.detail); });
  })();
</script>

Limitações

Não está em primeiro lugar no head. Tudo o que o Webflow apresenta acima do Head code é executado antes do Consentl. Isso inclui as integrações nativas em Site settings → Apps & integrations (Google Analytics, Meta Pixel), que podem ser injetadas antes dele. Remova essas integrações e carregue as mesmas tags através do Google Tag Manager com o Consent Mode (plano Pro e superiores), ou como tags carregadas por código no Head code abaixo da linha do Consentl. O Consentl retém os rastreadores reconhecidos que carregam depois dele (plano Business e superiores); nos planos Free e Pro, só são retidas as tags que marcar manualmente.
Tags inseridas diretamente. Um <script src>, um píxel <img> ou um <iframe> escrito no código Head/Footer ou num elemento Embed é obtido pelo navegador antes de qualquer script o poder travar, mesmo quando o Consentl impede a sua execução. Marque essas tags manualmente e remova os píxeis em <noscript>:
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
As tags carregadas por código (GTM, o loader JavaScript de um píxel) são retidas sem qualquer pedido quando o bloqueio automático está ativado.
Cada campo de código personalizado aceita até 50 000 caracteres; o loader ocupa uma linha.
O Webflow não tem um banner de cookies incluído que tenha de desativar. Remova qualquer outra aplicação de banner.
Content Security Policy. Os sites Enterprise podem definir cabeçalhos de resposta, incluindo content-security-policy, em Site settings → Publishing → Custom headers. Se definir um, permita https://api.consentl.com conforme descrito no guia para qualquer site. Sem um cabeçalho CSP personalizado, não há nada a alterar.

Com dificuldades? Escreva para support@consentl.com — respondemos em inglês nos dias úteis.