# Instalar FlowConsent en Framer

En Framer, añada el fragmento de FlowConsent en Project Settings → Custom Code al inicio del <head>, publique y no active además el Cookie Banner de Framer.

> Canonical: https://www.flowconsent.com/es/doc/install-framer
> Last updated: 2026-10-01
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](https://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](/es/doc/cloudflare-deployment)); 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:

```html title="Project Settings → Custom Code → inicio del <head>"
<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](/es/doc/nextjs-integration).

> [!WARNING]
> Framer ofrece su propio componente **Cookie Banner**, que envía las elecciones del visitante a Google Tag Manager mediante un ID de contenedor. No lo use junto con FlowConsent: dos banners suponen dos elecciones contradictorias y un consentimiento imposible de demostrar. Elimine el componente de su proyecto (suele estar dentro de un componente compartido, como la navegación) y vuelva a publicar.

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](/es/doc/setup-wizard).
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](/es/doc/compliance-verification).

## 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](/es/doc/mcp-server) y [la página MCP](/es/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](/es/doc/google-consent-mode).