# Instalar FlowConsent en Fimo

En Fimo, el sitio es su propio código: coloque el fragmento de FlowConsent al inicio del <head> del layout raíz, o pídaselo al chat de Fimo Studio, y publique.

> Canonical: https://www.flowconsent.com/es/doc/install-fimo
> Last updated: 2026-10-01
En Fimo (fimo.ai) no hay un campo de «código personalizado» que rellenar: su sitio es código real, en un repositorio que usted controla. El fragmento de FlowConsent va por tanto **al principio del `<head>` del layout raíz**, ya sea pidiéndoselo al **chat de Fimo Studio** o con su agente de código, y después hay que **publicar**. La trampa principal: los sitios Fimo usan frameworks que cambian de página sin recarga completa, así que hay que activar el **Modo SPA** del banner.

## 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 Fimo que pueda editar y publicar. Fimo crea sitios con Next.js (opción por defecto), React Router, Vite + React, Astro o SvelteKit, y puede alojar otras aplicaciones.

## Paso 1: Copie el fragmento de código

En FlowConsent, abra **Builder → Despliegue → Integración**, pestaña **HTML / No-code** (o **Next.js** si su sitio Fimo usa Next.js). El fragmento tiene dos partes, y su orden importa:

```html title="Inicio del <head> del layout raíz"
<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. Ambos deben ir antes de cualquier script de seguimiento.

## Paso 2: Añádalo al layout raíz

La documentación de Fimo no describe un menú de código personalizado en Studio: el `<head>` forma parte del código de su sitio. Hay dos maneras de hacerlo.

**Con el chat de Fimo Studio (lo más sencillo).** Abra el chat de su proyecto, describa el resultado que quiere y pegue el fragmento:

> Añada este fragmento al principio del `<head>` del layout raíz, antes de cualquier otro script, en todas las páginas, sin modificar el código: [fragmento de FlowConsent]

El chat prepara el cambio y lo deja para revisión: use **View changes** para comprobar que el fragmento es el primer elemento del `<head>`, y **Open preview** para verlo en una vista previa.

**Con su agente de código o a mano.** El archivo depende del framework:

| Framework | Dónde colocar el fragmento |
| - | - |
| Next.js | El layout raíz (`app/layout.tsx`), consulte la [guía de Next.js](/es/doc/nextjs-integration) |
| Astro | El layout que genera el `<head>` (`src/layouts/Base.astro` en los proyectos nuevos de Fimo), con `is:inline` en las dos etiquetas `<script>` para que Astro no las agrupe |
| SvelteKit | `src/app.html`, al principio del `<head>`, antes de `%sveltekit.head%` |
| Vite + React | `index.html` en la raíz del proyecto |
| React Router | El componente que genera el `<head>` en `app/root.tsx` |

Después, `fimo deploy` actualiza la vista previa de la rama actual, sin publicar nada.

## Paso 3: Publique

Un cambio guardado no modifica el sitio público. Cuando el cambio esté fusionado en la rama de producción (`main` por defecto), seleccione **Publish** arriba a la derecha de la cabecera del proyecto y luego **Publish** en el panel. Desde el terminal: `fimo checkout main` y después `fimo deploy --publish`.

## Trampas propias de Fimo

> [!WARNING]
> Next.js, React Router, Vite + React y SvelteKit cambian de página en el navegador, sin recargar el `<head>`. Active el **Modo SPA** en los ajustes del banner para que FlowConsent vuelva a comprobar el consentimiento en cada navegación. Lo mismo vale para Astro si usa View Transitions.

- **Vista previa y producción son distintas.** La vista previa sirve para la revisión entre miembros del proyecto, no es su sitio público. Haga las comprobaciones finales en la dirección publicada.
- **Los demás rastreadores van después.** Si el código carga Google Analytics, el Meta Pixel o Google Tag Manager, deben ir después del fragmento. Lo más seguro: retírelos del código y declárelos en **Builder → Servicios**, para que el banner solo los cargue tras el consentimiento.
- **Cabeceras de seguridad.** Fimo permite definir cabeceras HTTP en `.fimo/config.json`. Si añade ahí una Content Security Policy, autorice el dominio de su banner de FlowConsent o el navegador lo bloqueará.

## 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 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 Fimo y compruebe que está bien instalado en https://misitio.es

El servidor MCP de FlowConsent no modifica su sitio: le da el fragmento, las instrucciones y la verificación. Es usted, su agente de código o el chat de Fimo quien añade el fragmento al layout. Consulte [el servidor MCP](/es/doc/mcp-server) y [la página MCP](/es/mcp).

## Preguntas frecuentes

### ¿Tiene Fimo un campo para pegar código en el `<head>`?

La documentación de Fimo no describe ninguno: los ajustes de Studio cubren, por ejemplo, el SEO y los dominios, mientras que el `<head>` forma parte del código de su sitio. El fragmento se añade al layout raíz, mediante el chat de Studio o su agente de código.

### ¿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 principio del `<head>`, por encima del contenedor de GTM. Consulte [Google Consent Mode](/es/doc/google-consent-mode).

### ¿Puede un agente de Fimo retirar el fragmento por error?

Los agentes de Fimo trabajan en ramas y presentan sus cambios para revisión antes de fusionarlos. Revise los diffs que tocan el layout raíz y deje que la vigilancia de FlowConsent (`monitor_compliance`) señale cualquier regresión.