Comment ajouter un bandeau cookies à un site Webflow

Où coller la balise dans Webflow

Webflow imprime le code personnalisé du site sur chaque page du site publié. Ouvrez les « Site settings », cliquez sur l’onglet « Custom code », collez la balise tout en haut du champ « Head code » et cliquez sur « Save » :

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

Le Head code est imprimé avant la balise head fermante sur chaque page, et le code de head propre à chaque page (dans les réglages de la page) vient après lui : une balise ajoutée sur une seule page voit donc quand même la balise Cookiequiet en premier. Le champ accepte jusqu’à 50 000 caractères. Le code personnalisé est réservé aux offres de site payantes et aux offres Workspace ; un site Starter gratuit ne peut pas en ajouter. Rien ne change sur le site en ligne tant que vous n’avez pas cliqué sur « Publish ».

Comment gérer la mesure d’audience de Webflow et les balises que vous ajoutez

Google Analytics via Apps & Integrations. Webflow peut imprimer la balise Google à votre place quand vous saisissez un ID de mesure sous « Site settings », puis « Apps & Integrations », puis « Google Analytics » (ou via l’application Google site tools). Cette balise est imprimée par Webflow, en dehors de votre Head code, Cookiequiet ne peut donc pas la marquer. Retirez l’ID à cet endroit et collez la balise Google dans le Head code, sous la balise Cookiequiet, de l’une des deux façons décrites dans le guide Google Analytics 4 : marquée avec type="text/plain" data-cq-category="analytics" pour qu’elle ne se charge pas avant le consentement, ou précédée du bloc de consentement par défaut de Google pour qu’elle tourne en Consent Mode avec analytics_storage refusé.

Webflow Analyze. La mesure d’audience intégrée de Webflow n’utilise pas de cookies ; elle stocke un identifiant anonyme dans le local storage. À vous de décider si elle exige un consentement ; si oui, réglez son suivi par défaut sur « Don’t track by default » et ajoutez cette passerelle après la balise. Elle s’appuie sur l’événement cq:consent que Cookiequiet émet au chargement et après chaque choix, et sur l’API navigateur de Webflow :

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var analytics = e.detail.categories.indexOf('analytics') >= 0;
    if (typeof wf === 'undefined') return;
    wf.ready(function () {
      if (analytics) { wf.allowUserTracking(); } else { wf.denyUserTracking(); }
    });
  });
</script>

Balises que vous collez. Le pixel Meta, Hotjar, Clarity, les widgets de chat : marquez-les dans Head code ou Footer code avec type="text/plain" et data-cq-category="marketing" (ou analytics, ou functional pour un widget de chat). Les scripts qu’un gestionnaire de balises injecte en JavaScript sont retenus par le bloqueur automatique quand ils appartiennent à l’un des 80 traceurs connus.

Vidéos embarquées. Dans un élément Embed, écrivez l’iframe avec data-cq-src au lieu de src ; Cookiequiet renseigne la vraie adresse après le consentement. L’élément Video natif de Webflow construit son propre lecteur ; utilisez un élément Embed quand la vidéo doit attendre le consentement. Plus de détails dans Vidéos YouTube et consentement.

Comment ajouter le lien Préférences de cookies

Dans le Designer, ajoutez un « Text link » ou un « Link block » dans le pied de page, réglez son lien sur l’URL #cq-preferences, puis ouvrez les réglages de l’élément et ajoutez un attribut personnalisé nommé data-cq-show-preferences avec une valeur vide. L’un des deux suffit à Cookiequiet pour ouvrir le centre de préférences ; avoir les deux ne gêne pas. Publiez.

Comment tester

1. Publiez, puis ouvrez le site publié (le domaine webflow.io ou le vôtre) dans une fenêtre de navigation privée.
2. Cliquez sur « Tout refuser ». Vérifiez les cookies dans les outils de développement : cq_consent et rien de Google ni de Meta.
3. Effacez les cookies, cliquez sur « Tout accepter » et rechargez : les balises marquées s’exécutent, leurs cookies apparaissent.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Le bandeau ne s’affiche ni dans le Designer ni en mode aperçu, parce que le code personnalisé ne s’exécute que sur le site publié.

Ce qui est propre à Webflow

• Pas de bandeau intégré. Webflow n’a pas de bandeau de consentement à lui, il n’y a donc rien à désactiver. Les bandeaux de la marketplace (Cookiebot, iubenda et d’autres) doivent être retirés avant de publier avec Cookiequiet.
• Préproduction et production. Le sous-domaine webflow.io et votre domaine personnalisé reçoivent le même Head code, ce qui est pratique pour tester avant de connecter le domaine.
• Localisation. Le Head code du site s’applique à toutes les langues. Le bandeau choisit sa langue d’après le navigateur du visiteur, et chaque texte est modifiable par langue dans le tableau de bord.
• Webflow Optimize suit le même consentement de suivi qu’Analyze ; la passerelle ci-dessus couvre les deux.

Lancez le scanner de cookies gratuit sur le site publié pour lister les balises que Webflow imprime à votre place.