# Intégration Webflow : installer FlowConsent correctement

Installer FlowConsent sur Webflow : coller l'extrait de code dans Site settings → Custom code, publier, puis retirer le Measurement ID GA d'Apps & Integrations.

> Canonical: https://www.flowconsent.com/fr/doc/webflow-integration
> Last updated: 2026-07-30
Installer FlowConsent sur Webflow tient en deux étapes : coller votre extrait de code dans **Site settings → Custom code → Head code** et publier, puis **retirer tout Measurement ID Google Analytics de Site settings → Apps & Integrations**. Cette seconde étape n'est pas optionnelle : Webflow injecte son intégration GA native au-dessus de votre code personnalisé, là où aucun outil de consentement ne peut la bloquer.

## Étape 1 : coller l'extrait de code dans Head code

Copiez votre extrait de code depuis **Builder → Déploiement → Intégration** : un onglet **Webflow** le génère pour vous. Il comporte deux parties, et leur ordre compte :

```html title="Site settings → Custom code → Head code"
<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 est le **stub Consent Mode** : il enregistre des valeurs par défaut `denied` pour les quatre signaux de consentement Google dès la lecture du HTML. Le second charge la bannière elle-même. Le stub vient en premier parce que le script de la bannière se charge de façon asynchrone : le stub, écrit directement dans la page, gagne toujours la course contre tout tag Google chargé ensuite.

Dans Webflow : **Site settings → Custom code → Head code**, collez l'extrait de code tout en haut, enregistrez, puis **publiez** le site. Le code personnalisé n'est mis en ligne qu'à la publication : l'aperçu du Designer ne l'exécute pas.

## Étape 2 : retirer le Measurement ID GA d'Apps & Integrations

> [!WARNING]
> Si un Measurement ID Google Analytics est renseigné dans **Site settings → Apps & Integrations**, Webflow injecte son propre chargeur GA **au-dessus de votre code personnalisé**. Son `gtag('config')` entre alors dans le dataLayer avant vos valeurs de consentement par défaut, Google le traite sans aucune restriction, et les cookies de mesure d'audience sont déposés quoi que fasse la bannière. **Aucune CMP ne peut gagner cette course** : la seule correction est de retirer le Measurement ID de ce panneau et de déclarer Google Analytics dans **Builder → Services**, pour que la bannière ne l'injecte qu'après consentement.

Ce n'est pas théorique : les défauts Consent Mode ne s'appliquent qu'aux tags entrés dans le dataLayer **après** eux. Un `gtag('config', 'G-XXXX')` mis en file plus tôt est traité comme si le refus n'avait jamais existé.

## Comment FlowConsent détecte la course perdue

Vous n'avez pas à le découvrir en auditant les cookies à la main. Au démarrage, la bannière inspecte le dataLayer : si une entrée `gtag('config')` précède les défauts de consentement, elle affiche une erreur explicite dans la console du navigateur et remonte un événement `ConsentDefaultRaceLost` à la télémétrie FlowConsent, en nommant les identifiants de tags concernés. Si vous voyez cette erreur, un tag est injecté au-dessus de l'extrait de code : sur Webflow, c'est presque toujours le panneau Apps & Integrations.

## Vérifier l'installation

L'**assistant d'installation** (Builder → Intégration) contrôle la page en ligne pour vous, dans l'ordre où les choses cassent en vrai :

1. le chargeur FlowConsent est présent, avec **votre** code de licence ;
2. le stub Consent Mode est présent ;
3. le stub **précède** chaque tag Google, et il signale spécifiquement un tag injecté par les réglages du site Webflow.

> [!TIP]
> Terminez par un scan de refus depuis l'onglet **Conformité** : il charge votre site publié dans un vrai navigateur, refuse le consentement et confirme que rien ne part. Voilà la preuve que l'installation est correcte, pas le fait que la bannière soit visible.

## 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 récupère l'extrait et les instructions de placement (outils `get_banner_snippet` et `get_setup_instructions`), vérifie l'installation par un vrai scan (`verify_consent_compliance`) et peut poser une surveillance récurrente (`monitor_compliance`). Il ne modifie pas votre site Webflow à votre place : le collage reste de votre côté.

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

Voir le [guide du serveur MCP](/fr/doc/mcp-server) et la page [FlowConsent MCP](/fr/mcp).