RGPD et Webflow : ce que la loi exige vraiment
Les règles ne dépendent pas de l'outil qui a servi à construire le site. Si votre site Webflow est consulté depuis l'Union européenne, la directive ePrivacy (pour les cookies) et le RGPD (pour les données personnelles) s'appliquent. En France, la CNIL a précisé ces règles dans ses lignes directrices et sa recommandation sur les cookies : tout traceur qui n'est pas strictement nécessaire au service demandé par l'internaute exige un consentement préalable, libre et éclairé.
Sur le terrain, un bandeau cookies Webflow conforme doit faire cinq choses :
- bloquer les scripts non essentiels avant le consentement, pas seulement afficher un message par-dessus ;
- proposer Accepter et Refuser avec la même facilité dès le premier niveau, comme la CNIL l'exige depuis 2020 ;
- permettre de choisir par finalité (mesure d'audience, publicité, préférences) et de revenir sur son choix ;
- conserver une preuve de chaque choix (ce qui a été affiché, ce qui a été choisi, quand) ;
- transmettre les signaux de consentement à Google via Consent Mode v2 si vous utilisez Google Analytics ou Google Ads.
Les règles générales derrière chaque point sont détaillées dans notre guide du bandeau cookies conforme RGPD. Cet article se concentre sur leur mise en œuvre dans Webflow.
Qui est responsable sur un site Webflow ?
Vous. En tant qu'éditeur du site, vous décidez quels outils tournent sur vos pages : vous êtes donc responsable de traitement pour les données qu'ils collectent. Webflow agit comme hébergeur et sous-traitant. Google, Meta ou HubSpot sont sous-traitants ou responsables distincts selon l'outil. La CNIL ne retient pas l'argument « c'est l'outil qui le fait » : l'obligation pèse sur celui qui publie le site, qu'il tourne sur Webflow, WordPress ou Shopify.
Quels cookies un site Webflow dépose-t-il ?
Avant de choisir un bandeau, il faut savoir ce qu'il doit contrôler. Un site Webflow comporte trois couches de cookies et de traceurs.
Ce que Webflow dépose par défaut
Un site Webflow sans outil tiers dépose très peu de cookies : des cookies techniques liés à la sécurité, à l'envoi des formulaires et, si vous les utilisez, aux espaces connectés et au panier Ecommerce. Ils sont en général considérés comme strictement nécessaires et exemptés de consentement, sous réserve d'une analyse au cas par cas. Si votre site n'a vraiment rien d'autre, lisez notre analyse : faut-il une bannière cookies sur un site Webflow sans Analytics ? La réponse dépend davantage des intégrations, des polices et des formulaires que de la mesure d'audience.
Ce que vous ajoutez par le code personnalisé et les intégrations
C'est là que naissent presque toutes les obligations. Google Analytics 4, Google Ads, le pixel Meta, LinkedIn Insight Tag, HubSpot, Intercom, Hotjar, Clarity ou Mixpanel déposent leurs propres cookies ou identifiants, et tous exigent un consentement préalable. Classez-les selon les quatre catégories de cookies RGPD pour que votre bandeau les regroupe correctement.
Les sources propres à Webflow qu'on oublie
Certains traceurs entrent dans un site Webflow par des chemins faciles à manquer :
- Site settings → Apps & Integrations : un identifiant de mesure Google Analytics renseigné ici est injecté par Webflow lui-même, au-dessus de votre code personnalisé. Nous revenons sur ce piège plus bas.
- Les éléments Code Embed dans les pages, les modèles CMS et les composants : YouTube, Vimeo, Google Maps, Calendly, Typeform ou un chat. Chacun peut déposer des cookies au chargement. Pour les vidéos, voir notre guide YouTube nocookie : intégrer des vidéos sans cookies.
- Le code personnalisé au niveau d'une page, ajouté dans ses réglages, qu'un audit global peut ignorer.
- Google Fonts chargées depuis les serveurs de Google. Elles ne déposent pas de cookie, mais transmettent l'adresse IP du visiteur à Google à chaque page vue, ce qu'aucun bandeau ne corrige. Voir le risque Google Fonts sur Webflow.
- Les interactions ou scripts qui envoient des événements à des outils tiers au défilement ou au clic.
Le plus rapide pour savoir ce que fait réellement votre site publié est de le scanner. Vérifiez en 30 secondes quels cookies votre site Webflow dépose avec le scanner de cookies gratuit, sur votre domaine personnalisé et non sur le sous-domaine webflow.io.
Bandeau cookies Webflow : les solutions comparées
En cherchant « bandeau cookies webflow », vous tomberez sur quatre familles de solutions. Elles ne se valent pas : la différence tient au blocage réel des scripts et à la preuve du consentement.
Un bandeau dessiné dans le Designer
Les bandeaux « RGPD » à cloner sont nombreux dans la vitrine Webflow. Ils sont jolis et suivent votre charte, mais seuls, ce sont des éléments visuels : ils affichent un message et disparaissent au clic. Ils n'empêchent ni Google Analytics ni un pixel de se charger. Sans couche de script qui retient puis libère les balises, ils informent sans protéger.
Finsweet Cookie Consent
La solution de Finsweet, fondée sur des attributs, est très utilisée dans la communauté Webflow. Vous stylisez le bandeau dans le Designer et marquez les scripts avec des attributs pour qu'ils ne s'exécutent qu'après consentement. Bien câblée, elle assure un blocage de base. Vérifiez ce dont vous avez besoin au-delà : un registre horodaté de chaque consentement, Consent Mode v2 pour Google Ads, une liste de cookies automatique et une surveillance ne viennent pas d'une simple bibliothèque côté navigateur.
Les applications de la marketplace Webflow
Plusieurs applications de consentement s'installent depuis la marketplace Webflow Apps, comme Consentbit ou Consent Pro. Elles sont pensées pour Webflow et se configurent vite. Comparez-les sur les mêmes critères que n'importe quelle CMP : blocage effectif, preuve, Consent Mode v2, langues et prix par site. Nos comparatifs Consentbit vs FlowConsent et Consent Pro vs FlowConsent passent ces points en revue.
Une CMP généraliste avec un code pour Webflow
Si le terme est nouveau pour vous, commencez par ce qu'est une CMP et comment elle fonctionne. Des plateformes comme Axeptio, Cookiebot, CookieHub ou FlowConsent fonctionnent sur tout type de site et fournissent un code à coller dans le Head code de Webflow. Vous obtenez blocage des scripts, preuve de consentement, scan des cookies et Consent Mode v2 dans un seul outil, avec la même configuration si vous gérez aussi des sites sur d'autres plateformes. Voir Axeptio vs FlowConsent, Cookiebot vs FlowConsent ou l'ensemble des comparatifs.
Comment choisir
Quelle que soit la famille, posez cinq questions : bloque-t-elle les scripts et les intégrations avant le consentement, conserve-t-elle une preuve exportable, envoie-t-elle les signaux Consent Mode v2, gère-t-elle les langues de votre configuration Webflow Localization, et combien coûte-t-elle à votre niveau de trafic ? Notre guide pour choisir une CMP détaille chaque critère. Si vous payez déjà un bandeau, comparez le coût de votre CMP actuelle avec le comparateur de prix des CMP avant de renouveler.
Installer un bandeau cookies sur Webflow, étape par étape
Les étapes ci-dessous valent pour toutes les CMP. Quand un détail est propre à FlowConsent, c'est précisé.
Étape 1 : recenser tous les traceurs du site
Ouvrez Site settings → Custom code et copiez le contenu de Head code et de Footer code. Ouvrez ensuite Apps & Integrations et notez tout identifiant de suivi. Parcourez les réglages de chaque page pour le code propre à la page, et cherchez dans le Designer les éléments Code Embed des pages, modèles CMS et composants. Confrontez cette liste à un scan du site publié : le scan montre ce qui se charge vraiment, y compris ce qu'un outil charge à son tour. Notre méthode d'audit de cookies détaille la démarche.
Étape 2 : vérifier que votre plan Webflow autorise le code personnalisé
Le code personnalisé à l'échelle du site est réservé aux plans de site payants. Si votre site est encore sur un plan gratuit, vous ne pourrez pas ajouter le code d'une CMP dans le Head code : il faudra d'abord changer de plan.
Étape 3 : coller le code de la CMP en premier dans le Head code
Dans Site settings → Custom code → Head code, collez le code de la CMP tout en haut, avant Google Tag Manager, GA4 ou tout pixel. L'ordre compte : la CMP et ses valeurs de consentement par défaut doivent être en place avant les scripts qu'elles contrôlent. Le code au niveau du site s'exécute sur toutes les pages, modèles CMS et pages Ecommerce compris ; le code d'une seule page laisserait des trous.
Avec FlowConsent, l'onglet Webflow de Builder → Deployment → Integration génère le code. Il comporte deux parties : un stub Consent Mode en ligne, qui met les quatre signaux Google à « denied » pendant la lecture de la page, puis le chargeur du bandeau. Gardez cet ordre.
Étape 4 : retirer l'identifiant Google Analytics d'Apps & Integrations
C'est le piège Webflow le plus fréquent. Si un identifiant de mesure Google Analytics est renseigné dans Site settings → Apps & Integrations, Webflow injecte son propre chargeur GA au-dessus de votre code personnalisé. La configuration GA atteint Google avant vos valeurs par défaut, et les cookies de mesure sont déposés quel que soit le choix du visiteur. Aucune CMP ne peut gagner cette course depuis le code personnalisé. La solution : supprimer l'identifiant de ce panneau et déclarer Google Analytics dans votre CMP, pour qu'il ne soit injecté qu'après consentement. Pour le reste des réglages GA4, lisez Google Analytics est-il conforme au RGPD ?
Étape 5 : placer chaque script non essentiel derrière le consentement
Sortez chaque traceur du code personnalisé brut et laissez la CMP le libérer. Selon l'outil, trois schémas existent :
- la CMP injecte elle-même le script après consentement (avec FlowConsent, vous activez le service dans Builder → Services et y collez son script) ;
- le script reste dans le code personnalisé de Webflow, mais son type est modifié pour que le navigateur l'ignore tant que la CMP ne l'active pas ;
- le script devient une balise Google Tag Manager qui ne se déclenche que si le consentement correspondant est donné. Notre guide Google Tag Manager et Consent Mode v2 détaille les déclencheurs.
Étape 6 : bloquer les intégrations (embeds)
YouTube, Vimeo, cartes et widgets de réservation ajoutés par Code Embed ne doivent pas se charger avant le consentement. Remplacez-les par un espace réservé qui charge l'iframe après acceptation, ou laissez votre CMP s'en charger. Avec FlowConsent, vous ajoutez un attribut data-service à l'intégration pour que le bandeau la retienne jusqu'à l'accord du visiteur.
Étape 7 : configurer Google Consent Mode v2
Si vous utilisez Google Analytics ou Google Ads, Google attend des signaux de consentement pour le trafic de l'Espace économique européen. Vérifiez que des valeurs « denied » sont envoyées avant toute balise Google et qu'une mise à jour suit le choix du visiteur. Notre guide Google Consent Mode v2 explique les modes basic et advanced.
Étape 8 : adapter le bandeau au site et aux langues
Reprenez les polices et couleurs du site, gardez Accepter et Refuser au même poids visuel et évitez les dark patterns que la CNIL sanctionne. Si vous utilisez Webflow Localization avec des dossiers de langue comme /fr ou /de, configurez le bandeau pour détecter la langue depuis l'URL afin que chaque version affiche le bon texte. Liez votre politique de cookies depuis le bandeau et le pied de page.
Étape 9 : publier
Le code personnalisé ne part en ligne qu'à la publication. L'aperçu du Designer ne l'exécute pas : rien de ce que vous y voyez ne prouve que le bandeau fonctionne.
Tester votre bandeau cookies Webflow
Testez sur le domaine personnalisé, pas sur le sous-domaine de préproduction webflow.io : domaines, cookies et certaines intégrations s'y comportent différemment.
- Ouvrez une fenêtre de navigation privée avec les outils de développement sur les onglets Network et Application.
- Chargez la page d'accueil sans toucher au bandeau. Aucune requête ne doit partir vers google-analytics.com, facebook.net, hotjar.com ou équivalent, et aucun cookie non essentiel ne doit apparaître.
- Cliquez sur Refuser. Parcourez quelques pages, dont un modèle CMS et une page avec vidéo. Rien de non essentiel ne doit se charger.
- Effacez les données du site, acceptez seulement la mesure d'audience, et vérifiez que seuls ces outils se chargent.
- Acceptez tout et vérifiez que chaque outil fonctionne.
- Rouvrez le bandeau depuis le lien du pied de page et retirez votre consentement.
- Recommencez sur mobile.
Les tests manuels détectent les problèmes d'aujourd'hui, pas ceux de demain. Un collègue qui réactive le champ Google Analytics ou colle un nouveau pixel dans le Footer code rouvre la fuite. La vérification de conformité de FlowConsent charge vos pages publiées dans un vrai navigateur, refuse le consentement et liste tout ce qui se déclenche encore, y compris une balise injectée par les réglages du site Webflow. La surveillance de conformité relance ce contrôle à intervalle régulier et vous alerte dès qu'une page régresse.
Formulaires Webflow et RGPD
Les formulaires sont l'autre moitié du « RGPD sur Webflow », et le bandeau cookies ne les couvre pas. Un formulaire Webflow qui collecte un nom ou un e-mail traite des données personnelles, donc :
- informez les personnes, à côté du formulaire, de qui reçoit les données, pourquoi et combien de temps vous les gardez, avec un lien vers votre politique de confidentialité ;
- n'ajoutez une case de consentement que si le traitement repose vraiment sur le consentement (une newsletter, par exemple), et ne la précochez jamais ;
- ne demandez que les champs nécessaires ;
- n'oubliez pas que les soumissions sont stockées dans Webflow et souvent transmises à d'autres outils (HubSpot, Zapier, un CRM) : citez ces destinataires dans votre politique de confidentialité et votre registre des traitements.
Si vous activez reCAPTCHA sur les formulaires Webflow, le script de Google se charge sur la page. Son statut au regard des règles sur les traceurs fait débat : mentionnez-le au minimum dans votre politique de cookies et dans la liste de cookies du bandeau.
Les erreurs fréquentes sur Webflow
Laisser l'identifiant GA dans Apps & Integrations. Webflow charge Google Analytics avant toute valeur de consentement par défaut. Retirez-le et laissez la CMP gérer GA.
Coller des scripts de suivi au-dessus du code de la CMP. Tout ce qui est placé plus haut dans le Head code s'exécute avant que le bandeau puisse agir.
Utiliser un bandeau purement visuel. Un bandeau cloné qui disparaît au clic n'arrête aucun traceur.
Tester uniquement sur webflow.io ou dans l'aperçu du Designer. L'aperçu n'exécute pas le code personnalisé, et la préproduction n'est pas votre domaine de production.
Oublier les intégrations dans les modèles CMS. Un seul modèle d'article avec une iframe YouTube peut déposer des cookies sur des centaines de pages.
Charger Google Fonts depuis Google. Hébergez les polices dans Webflow pour supprimer le transfert d'IP.
Ignorer le code propre à une page. Une page d'atterrissage avec son propre pixel échappe à un audit global.
Ne jamais revérifier. Un site change chaque semaine. Programmez des scans ou une surveillance pour qu'un nouveau script ne passe pas inaperçu pendant des mois.
Et sur les autres plateformes
Ce guide est le point d'entrée de notre série plateformes. Chaque guide ci-dessous explique d'où viennent les scripts sur la plateforme, ses pièges propres et comment installer un bandeau qui les bloque :
- WordPress : cookies et consentement sur WordPress, extensions, thèmes et cache (guide d'installation).
- WooCommerce : WooCommerce et RGPD, tunnel de commande, scripts de paiement et données clients (guide d'installation).
- Shopify : Shopify et cookies RGPD, Customer Privacy API et scripts d'applications (guide d'installation).
- Wix : Wix et cookies RGPD, la bannière native et ses limites (guide d'installation).
- Squarespace : Squarespace et cookies RGPD, puis Consent Mode v2 sur Squarespace (guide d'installation).
- HubSpot : HubSpot et cookies RGPD, code de suivi et formulaires (guide d'installation).
- PrestaShop : PrestaShop et cookies RGPD, modules et thèmes (guide d'installation).
- Next.js : Next.js et cookies RGPD, navigation côté client et chargement des scripts (guide d'intégration).
- Framer : le guide d'installation Framer couvre le code, le mode SPA et la bannière propre à Framer.
- Webflow, cas particuliers : un site Webflow sans Analytics et Google Fonts sur Webflow.
Si vos balises passent par Google Tag Manager, quelle que soit la plateforme, le guide d'installation GTM s'ajoute au guide de la plateforme.
Comment FlowConsent gère le bandeau cookies sur Webflow
FlowConsent s'installe sur Webflow avec un seul code dans le Head code, généré depuis l'onglet Webflow du Builder, en une dizaine de minutes. Le stub Consent Mode v2 en ligne met les signaux Google à « denied » avant toute balise, puis le bandeau bloque scripts et intégrations jusqu'à l'accord du visiteur. Si une balise Google est injectée au-dessus du code, en général par le panneau Apps & Integrations de Webflow, le bandeau affiche une erreur explicite dans la console et la vérification d'installation en nomme la cause. Le scan automatique des cookies tient la liste à jour, chaque choix est conservé comme preuve exportable et les données sont hébergées en Europe. FlowConsent est gratuit jusqu'à 25 000 sessions par mois, puis 14,99 € par mois jusqu'à 100 000 sessions avec Pro. Suivez le guide d'intégration Webflow pour l'installer.