Consentl en Webflow

Añada el cargador de Consentl al Head code de Webflow, transmita la elección a Webflow Analyze y entienda qué significa «no el primero en el head».

Cargador el primero en el <head>: No: lea las limitaciones

¿Puede el cargador ir el primero en el <head>? No. Webflow genera el Head code de todo el sitio al final del <head>, después de sus propias metaetiquetas, su CSS y pequeños scripts en línea. El código de cada página va después del código de todo el sitio. Consulte Limitaciones.

Requisitos

Un Site plan de pago, o un Workspace Core, Growth, Agency o Freelancer. En un sitio Starter gratuito, la pestaña Custom code es visible pero no se puede guardar.
Su clave del sitio de Consentl, en la página Configuración inicial de su sitio en el panel de control. Añada todos los nombres de host en los que funciona el sitio (su dominio personalizado y su dirección your-site.webflow.io) en el campo Dominios; www. y el dominio sin www cuentan como el mismo sitio, así que no hace falta añadir www. por separado.

Qué cubre su plan de Consentl

Free: solo banner, registro de consentimientos y bloqueo manual.
Pro: añade Google Consent Mode v2.
Business: añade el bloqueo automático de rastreadores conocidos y las reglas de bloqueo que añada en el panel de control.

En Free y Pro, solo se retienen las etiquetas que marque manualmente.

Instalación

En Webflow, abra el sitio → Site settings → Custom code.
En Head code, pegue esto en la primera línea, por encima de cualquier otro código que ya haya:
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Sustituya SITE_KEY, y en por el idioma de su sitio (consulte Sitios multilingües). Si el sitio también utiliza la plantilla de Consentl para GTM, añada &gcm=ext a la URL para que solo la plantilla envíe comandos de Consent Mode.
Haga clic en Save changes y, después, en Publish en su dominio webflow.io o personalizado.
Opcional: añada un enlace «Configuración de cookies» a su pie de página: un bloque Link con la URL #consentl. Los enlaces cuya URL termina en #consentl o #consentl-preferences, y cualquier elemento con el atributo data-consentl-open, abren las preferencias.
Opcional: en su página de política de cookies, añada un elemento Embed con la declaración 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>
```
Utilice en su lugar data-consentl-request o data-consentl-withdrawal para el formulario de solicitudes sobre datos personales o el formulario de desistimiento de la UE. El formulario de desistimiento requiere el plan Pro o superior y debe activarse en el panel de control; de lo contrario, queda vacío.

Comprobar que funciona

Abra el sitio publicado en una ventana privada: aparece el banner. El código personalizado no se ejecuta en el lienzo del Designer. Sí se ejecuta en los modos Preview y Comment, por lo que el banner también puede aparecer allí; la prueba fiable es el sitio publicado.

La región del visitante se obtiene de su dirección IP: Consentl consulta el país en memoria en cada vista de página (no se almacena nada) y aplica la regla que haya definido para él en el panel de control. No se distingue entre estados de EE. UU.: los visitantes de EE. UU. reciben su regla para todo EE. UU. o, si no la hay, su primera regla de un estado de EE. UU. Un país desconocido recibe su regla para las regiones desconocidas (opt-in de forma predeterminada).

Sitios multilingües (Webflow Localization)

Desde el 26 de junio de 2026, Webflow Localization permite definir el código personalizado de Head y Footer por configuración regional. Añada el cargador al Head code de cada configuración regional con el idioma correspondiente en &l= (por ejemplo, &l=de para la configuración regional alemana). Así, cada página carga una única URL del cargador, la misma en todas las páginas de esa configuración regional.

Si prefiere un solo fragmento de código para todas las configuraciones regionales, omita &l=…: el banner utiliza entonces el idioma predeterminado del sitio definido en el panel de control.

Webflow Analyze / Optimize

Las analíticas propias de Webflow tienen un interruptor de consentimiento independiente:

Establezca Insights → Settings → Tracking en Don't track by default y, después, publique el sitio. El ajuste solo surte efecto tras la publicación.

Transmita la elección de Consentl añadiendo esto al Footer code. Aplica la elección actual en cada carga de página y sigue los cambios 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>

Limitaciones

No es el primero en el head. Todo lo que Webflow genera por encima del Head code se ejecuta antes que Consentl. Eso incluye las integraciones nativas de Site settings → Apps & integrations (Google Analytics, Meta Pixel), que pueden inyectarse antes. Elimine esas integraciones y cargue las mismas etiquetas mediante Google Tag Manager con Consent Mode (plan Pro y superiores), o como etiquetas cargadas por código en el Head code por debajo de la línea de Consentl. Consentl retiene los rastreadores reconocidos que se cargan después de él (plan Business y superiores); en Free y Pro, solo se retienen las etiquetas que marque manualmente.
Etiquetas escritas directamente. Un <script src>, un píxel <img> o un <iframe> escrito en el código Head/Footer o en un elemento Embed lo obtiene el navegador antes de que ningún script pueda detenerlo, aunque Consentl impida que se ejecute. Marque manualmente esas etiquetas y elimine los píxeles en <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">
```
Las etiquetas cargadas por código (GTM, el cargador JavaScript de un píxel) se retienen sin solicitud cuando el bloqueo automático está activado.
Cada campo de código personalizado admite hasta 50 000 caracteres; el cargador ocupa una línea.
Webflow no tiene un banner de cookies integrado que desactivar. Elimine cualquier otra aplicación de banner.
Content Security Policy. Los sitios Enterprise pueden definir cabeceras de respuesta, incluida content-security-policy, en Site settings → Publishing → Custom headers. Si define una, permita https://api.consentl.com como se describe en la guía para sitios web. Sin una cabecera CSP personalizada, no hay nada que cambiar.

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.