# Installer FlowConsent sur Fimo

Sur Fimo, le site est votre propre code : placez l'extrait FlowConsent en tête du <head> du layout racine, ou demandez-le au chat de Fimo Studio, puis publiez.

> Canonical: https://www.flowconsent.com/fr/doc/install-fimo
> Last updated: 2026-10-01
Sur Fimo (fimo.ai), il n'y a pas de champ « code personnalisé » à remplir : votre site est du vrai code, dans un dépôt que vous contrôlez. L'extrait FlowConsent se place donc **tout en haut du `<head>` du layout racine** du site, soit en le demandant au **chat de Fimo Studio**, soit avec votre agent de code, puis on **publie**. Le piège principal : les sites Fimo reposent sur des frameworks qui changent de page sans rechargement, il faut donc activer le **mode SPA** de la bannière.

## Avant de commencer

- Un compte sur [app.flowconsent.com](https://app.flowconsent.com) (offre Free gratuite, sans carte bancaire, 25 000 sessions par mois) et une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare ([guide](/fr/doc/cloudflare-deployment)) ; sur Pro et Enterprise, il se fait en un clic.
- Un projet Fimo que vous pouvez modifier et publier. Fimo crée des sites en Next.js (choix par défaut), React Router, Vite + React, Astro ou SvelteKit, et peut héberger d'autres applications.

## Étape 1 : copier l'extrait de code

Dans FlowConsent, ouvrez **Builder → Déploiement → Intégration**, onglet **HTML / No-code** (ou **Next.js** si votre site Fimo est en Next.js). L'extrait comporte deux parties, et leur ordre compte :

```html title="En tête du <head> du layout racine"
<script>
// FlowConsent Loader - PLACER AVANT tout autre script dans le <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://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>
```

Le premier bloc pose les valeurs par défaut Consent Mode v2 (tout `denied`), le second charge la bannière. Ils doivent arriver avant tout script de suivi.

## Étape 2 : l'ajouter au layout racine

La documentation de Fimo ne décrit pas de menu dédié au code personnalisé dans Studio : le `<head>` vit dans le code de votre site. Deux façons de faire.

**Avec le chat de Fimo Studio (le plus simple).** Ouvrez le chat de votre projet et décrivez le résultat attendu, en collant l'extrait :

> Ajoute cet extrait tout en haut du `<head>` du layout racine, avant tout autre script, sur toutes les pages, sans modifier le code : [extrait FlowConsent]

Le chat prépare la modification et la laisse en revue : utilisez **View changes** pour vérifier que l'extrait est bien le premier élément du `<head>`, et **Open preview** pour le voir dans un aperçu.

**Avec votre agent de code ou à la main.** Le fichier dépend du framework :

| Framework | Où placer l'extrait |
| - | - |
| Next.js | Le layout racine (`app/layout.tsx`), voir le [guide Next.js](/fr/doc/nextjs-integration) |
| Astro | Le layout qui rend le `<head>` (`src/layouts/Base.astro` sur les nouveaux projets Fimo), avec `is:inline` sur les deux balises `<script>` pour qu'Astro ne les regroupe pas |
| SvelteKit | `src/app.html`, en tête du `<head>`, avant `%sveltekit.head%` |
| Vite + React | `index.html` à la racine du projet |
| React Router | Le composant qui rend le `<head>` dans `app/root.tsx` |

Ensuite, `fimo deploy` met à jour l'aperçu de la branche en cours, sans rien publier.

## Étape 3 : publier

Une modification enregistrée ne change pas le site public. Une fois la modification fusionnée dans la branche de production (`main` par défaut), cliquez sur **Publish** en haut à droite de l'en-tête du projet, puis sur **Publish** dans le panneau. Depuis le terminal : `fimo checkout main` puis `fimo deploy --publish`.

## Les pièges propres à Fimo

> [!WARNING]
> Next.js, React Router, Vite + React et SvelteKit changent de page côté navigateur, sans recharger le `<head>`. Activez le **mode SPA** dans les réglages de la bannière : FlowConsent revérifie alors le consentement à chaque navigation. Même chose pour Astro si vous utilisez les View Transitions.

- **Aperçu et production sont distincts.** L'aperçu sert à la revue entre membres du projet, ce n'est pas votre site public. Faites les vérifications finales sur l'adresse publiée.
- **Les autres traceurs passent après.** Si le code charge Google Analytics, le Meta Pixel ou Google Tag Manager, ils doivent venir après l'extrait. Le plus sûr : retirez-les du code et déclarez-les dans **Builder → Services**, pour que la bannière ne les charge qu'après consentement.
- **En-têtes de sécurité.** Fimo permet de définir des en-têtes HTTP dans `.fimo/config.json`. Si vous y ajoutez une Content Security Policy, autorisez le domaine de votre bannière FlowConsent, sinon le navigateur la bloquera.

## Vérifier l'installation

1. Ouvrez votre site publié en **navigation privée** : la bannière doit s'afficher.
2. Dans l'onglet **Réseau** des outils de développement, aucune requête tierce ne doit partir avant le clic sur « Accepter ».
3. Lancez l'**assistant d'installation** (**Builder → Intégration**) : il contrôle la page en ligne (loader présent avec votre code de licence, stub Consent Mode présent, stub placé AVANT chaque tag Google). Voir [l'assistant d'installation](/fr/doc/setup-wizard).
4. Terminez par un **scan de refus** depuis l'onglet **Conformité** : un vrai navigateur refuse le consentement et confirme que rien ne se déclenche. Voir [la vérification de conformité](/fr/doc/compliance-verification).

## Le faire depuis votre agent IA (MCP)

FlowConsent dispose d'un serveur MCP officiel, `https://mcp.flowconsent.com`, utilisable depuis Claude, ChatGPT ou tout client MCP. La connexion se fait en OAuth 2.0 avec votre compte FlowConsent, sans clé d'API. Votre agent peut récupérer l'extrait de code et les consignes de placement (outils `get_banner_snippet` et `get_setup_instructions`), vérifier l'installation avec un vrai scan (`verify_consent_compliance`) et poser une surveillance récurrente (`monitor_compliance`).

Exemple de demande :

> Donne-moi l'extrait de code de ma bannière pour mon site Fimo et vérifie qu'il est bien installé sur https://monsite.fr

Le serveur MCP de FlowConsent ne modifie pas votre site : il fournit l'extrait, les instructions et la vérification. C'est vous, votre agent de code ou le chat de Fimo qui ajoutez l'extrait au layout. Voir [le serveur MCP](/fr/doc/mcp-server) et [la page MCP](/fr/mcp).

## Questions fréquentes

### Fimo a-t-il un champ pour coller du code dans le `<head>` ?

La documentation de Fimo n'en décrit pas : les réglages de Studio couvrent par exemple le SEO et les domaines, tandis que le `<head>` fait partie du code de votre site. On ajoute donc l'extrait au layout racine, via le chat de Studio ou votre agent de code.

### Faut-il passer par Google Tag Manager ?

Non. FlowConsent ne se charge pas via GTM, car une bannière chargée depuis GTM arrive trop tard pour le blocage préalable. L'extrait se place en tête du `<head>`, au-dessus du conteneur GTM. Voir [Google Consent Mode](/fr/doc/google-consent-mode).

### Un agent Fimo peut-il retirer l'extrait par erreur ?

Les agents Fimo travaillent dans des branches et présentent leurs modifications en revue avant fusion. Relisez les diffs qui touchent au layout racine, et laissez la surveillance FlowConsent (`monitor_compliance`) signaler toute régression.