Instalar FlowConsent en Framer

En Framer, el fragmento de código de FlowConsent se añade en Project Settings → Custom Code → Add Script, colocado al inicio del <head>, y después hay que publicar el sitio. La instalación son tres pasos. La trampa principal: el componente Cookie Banner de Framer es otro banner de consentimiento, conectado a Google Tag Manager; si lo ha añadido, retírelo para no mostrar dos banners.

Antes de empezar

• Una cuenta en app.flowconsent.com (plan Free gratuito, sin tarjeta, 25 000 sesiones al mes) y un banner creado y desplegado. En el plan Free, el despliegue pasa por su propia cuenta de Cloudflare (guía); en Pro y Enterprise se hace con un clic.
• Un proyecto de Framer que pueda editar y publicar. En la práctica, un banner RGPD funciona en su propio dominio, y Framer reserva los dominios personalizados a los planes de pago (Site plans). Si el editor le pide cambiar de plan al añadir el script, su plan actual no lo incluye.

Paso 1: Copie el fragmento de código

En FlowConsent, abra Builder → Despliegue → Integración, pestaña HTML / No-code. El fragmento tiene dos partes, y su orden importa:

<script>
// FlowConsent Loader - COLOCAR ANTES de cualquier otro script en el <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
  'ad_storage':'denied',
  'analytics_storage':'denied',
  'ad_user_data':'denied',
  'ad_personalization':'denied',
  'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA"></script>

El primer bloque fija los valores por defecto de Consent Mode v2 (todo denied), el segundo carga el banner. Péguelos juntos, en un único script de Framer.

Paso 2: Añádalo en Project Settings → Custom Code

La interfaz de Framer está en inglés. En su proyecto:

1. Abra Project Settings (en algunas versiones del editor, Site Settings).
2. Seleccione la pestaña Custom Code en la barra lateral izquierda.
3. Haga clic en Add Script si todavía no hay código; si no, en el icono +.
4. Ponga al script un nombre claro, por ejemplo FlowConsent, y pegue el fragmento.
5. Elija como ubicación el inicio de la etiqueta <head> (start of <head>), para que el fragmento se ejecute antes que cualquier otro script.
6. Deje el script activo en todas las páginas, sin restringir la lista de páginas.
7. En la frecuencia de ejecución, elija Once: la página carga el fragmento una sola vez, y es el banner el que sigue después los cambios de página (ver el paso 3).

Paso 3: Publique, active el Modo SPA y retire el Cookie Banner de Framer

El código personalizado no se ejecuta en la vista previa del lienzo: haga clic en Publish para poner el fragmento en línea y pruebe en el sitio publicado.

Un sitio de Framer cambia de página en el navegador, sin recarga completa. Active por tanto el Modo SPA en los ajustes del banner: FlowConsent vuelve a comprobar el consentimiento en cada navegación. El principio se explica en la guía de Next.js y SPA.

Si cargaba Google Tag Manager, Google Analytics o el Meta Pixel con otros scripts de Custom Code, ninguno debe ejecutarse antes que FlowConsent. Lo más seguro: retire esos scripts y declare los servicios en Builder → Servicios, para que el banner solo los cargue tras el consentimiento. En el caso de GTM, mantenga el contenedor en código personalizado, pero colocado al final del <head> (end of <head>), es decir, después del fragmento de FlowConsent. Según Framer, sus estadísticas integradas (Framer Analytics) no usan cookies, así que no pasan por el banner.

Verificar la instalación

1. Abra su sitio publicado en una ventana privada: el banner debe aparecer.
2. En la pestaña Red de las herramientas de desarrollo, ninguna petición a terceros (Google, Meta, LinkedIn, etc.) debe salir antes de hacer clic en «Aceptar».
3. Ejecute el asistente de instalación (Builder → Integración): comprueba la página publicada (loader presente con su código de licencia, stub de Consent Mode presente, stub colocado ANTES de cada etiqueta de Google). Consulte el asistente de instalación.
4. Termine con un escaneo de rechazo desde la pestaña Conformidad: un navegador real rechaza el consentimiento y confirma que nada se dispara. Consulte la verificación de conformidad.

Hacerlo desde su agente de IA (MCP)

FlowConsent tiene un servidor MCP oficial, https://mcp.flowconsent.com, que funciona desde Claude, ChatGPT o cualquier cliente MCP. La conexión se hace por OAuth 2.0 con su cuenta de FlowConsent, sin clave de API. Su agente puede obtener el fragmento de código y las instrucciones de colocación (herramientas get_banner_snippet y get_setup_instructions), verificar la instalación con un escaneo real (verify_consent_compliance) y programar una vigilancia recurrente (monitor_compliance).

Ejemplo de petición:

Deme el fragmento de código de mi banner para mi sitio Framer y compruebe que está bien instalado en https://misitio.es

El agente no modifica su proyecto de Framer por usted: le da el fragmento, las instrucciones y la verificación. Consulte el servidor MCP y la página MCP.

Preguntas frecuentes

¿Por qué el banner no aparece en la vista previa de Framer?

Framer no carga el código personalizado en la vista previa del lienzo. Publique el sitio y abra la dirección publicada, a ser posible en una ventana privada.

¿Necesito un banner si solo uso Framer Analytics?

Según Framer, sus estadísticas integradas no instalan cookies y no requieren consentimiento. En cuanto añade un servicio de terceros (Google Analytics, HubSpot, vídeos de YouTube, etc.), necesita un banner.

¿Puedo añadir FlowConsent en una sola página?

Framer lo permite, pero no se recomienda: el banner tiene que estar en todas las páginas para bloquear los scripts antes del consentimiento y permitir al visitante cambiar su elección en cualquier lugar.

¿Debo cargar FlowConsent con Google Tag Manager?

No. FlowConsent no se carga a través de GTM, porque un banner cargado desde GTM llega demasiado tarde para el bloqueo previo. El fragmento va al inicio del <head>, por encima del contenedor de GTM. Consulte Google Consent Mode.