Consentl sur Webflow

Ajoutez le chargeur Consentl au Head code du site Webflow, transmettez le choix à Webflow Analyze et découvrez ce que « pas en premier dans head » implique.

Chargeur en premier dans <head>: Non — lire les limites

Le chargeur peut-il être en premier dans <head> ? Non. Webflow génère le Head code de l’ensemble du site à la fin de <head>, après ses propres balises meta, son CSS et de petits scripts en ligne. Le code au niveau de la page vient après le code de l’ensemble du site. Voir Limites.

Prérequis

Un Site plan payant, ou un Workspace Core, Growth, Agency ou Freelancer. Sur un site Starter gratuit, l’onglet Custom code est visible mais ne peut pas être enregistré.
Votre clé du site Consentl, sur la page Configuration de votre site dans le tableau de bord. Ajoutez chaque nom d’hôte sur lequel le site fonctionne (votre domaine personnalisé et votre adresse your-site.webflow.io) dans le champ Domaines ; www. et le domaine nu comptent comme le même site : il est donc inutile d’ajouter www. séparément.

Ce que couvre votre forfait Consentl

Free : bannière, journal des consentements et blocage manuel uniquement.
Pro : ajoute Google Consent Mode v2.
Business : ajoute le blocage automatique des traceurs connus et les règles de blocage que vous ajoutez dans le tableau de bord.

Avec Free et Pro, seules les balises que vous marquez manuellement sont bloquées.

Installation

Dans Webflow, ouvrez le site → Site settings → Custom code.
Dans Head code, collez ceci en première ligne, au-dessus de tout autre code déjà présent :
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Remplacez SITE_KEY, ainsi que en par la langue de votre site (voir Sites multilingues). Si le site utilise aussi le modèle GTM de Consentl, ajoutez &gcm=ext à l’URL afin que seul le modèle envoie les commandes Consent Mode.
Cliquez sur Save changes, puis sur Publish vers votre domaine webflow.io et/ou votre domaine personnalisé.
Facultatif : ajoutez un lien « Paramètres des cookies » à votre pied de page : un bloc Link avec l’URL #consentl. Les liens dont l’URL se termine par #consentl ou #consentl-preferences, ainsi que tout élément portant l’attribut data-consentl-open, ouvrent les préférences.
Facultatif : sur votre page de politique relative aux cookies, ajoutez un élément Embed avec la déclaration relative aux cookies :
```
<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>
```
Utilisez plutôt data-consentl-request ou data-consentl-withdrawal pour le formulaire de demande relative aux données personnelles ou le formulaire de rétractation UE. Le formulaire de rétractation nécessite le forfait Pro ou supérieur et doit être activé dans le tableau de bord ; sinon, il reste vide.

Vérifier le fonctionnement

Ouvrez le site publié dans une fenêtre de navigation privée : la bannière apparaît. Le code personnalisé ne s’exécute pas dans le canevas du Designer. Il s’exécute en revanche dans les modes Preview et Comment : la bannière peut donc aussi y apparaître ; le site publié reste le test fiable.

La région du visiteur est déterminée à partir de son adresse IP : Consentl recherche le pays en mémoire à chaque affichage de page (rien n’est enregistré) et applique la règle correspondante de votre tableau de bord. Les États américains ne sont pas distingués : les visiteurs américains reçoivent votre règle pour l’ensemble des États-Unis ou, à défaut, votre première règle d’État américain. Un pays inconnu reçoit votre règle pour les régions inconnues (opt-in par défaut).

Sites multilingues (Webflow Localization)

Depuis le 26 juin 2026, Webflow Localization permet de définir le code personnalisé Head et Footer par locale. Ajoutez le chargeur au Head code de chaque locale avec la langue de cette locale dans &l= (par exemple &l=de pour la locale allemande). Chaque page charge alors une seule URL du chargeur, la même sur toutes les pages de cette locale.

Si vous préférez un seul snippet pour toutes les locales, omettez &l=… : la bannière utilise alors la langue par défaut du site définie dans le tableau de bord.

Webflow Analyze / Optimize

Les outils de statistiques propres à Webflow disposent d’un interrupteur de consentement distinct :

Réglez Insights → Settings → Tracking sur Don’t track by default, puis publiez le site. Le réglage ne prend effet qu’après la publication.

Transmettez le choix Consentl en ajoutant ceci au Footer code. Il applique le choix actuel à chaque chargement de page et suit les modifications ultérieures :

<script>
  (function () {
    function sync(c) {
      if (!c || !window.wf) return;
      wf.ready(function () {
        var want = c.analytics ? "allow" : "deny";
        if (wf.getUserTrackingChoice() === want) return;
        if (c.analytics) wf.allowUserTracking({ activate: true });
        else wf.denyUserTracking();
      });
    }
    if (window.Consentl) sync(window.Consentl.get());
    document.addEventListener("consentl:change", function (e) { sync(e.detail); });
  })();
</script>

Limites

Pas en premier dans head. Tout ce que Webflow rend au-dessus du Head code s’exécute avant Consentl. Cela comprend les intégrations natives sous Site settings → Apps & integrations (Google Analytics, Meta Pixel), qui peuvent être injectées avant lui. Supprimez ces intégrations et chargez les mêmes balises via Google Tag Manager avec Consent Mode (à partir du forfait Pro), ou sous forme de balises chargées par du code dans le Head code, sous la ligne Consentl. Consentl bloque les traceurs reconnus qui se chargent après lui (à partir du forfait Business) ; avec Free et Pro, seules les balises que vous marquez manuellement sont bloquées.
Balises codées en dur. Un <script src>, un pixel <img> ou une <iframe> écrit dans le code Head/Footer ou dans un élément Embed est récupéré par le navigateur avant qu’un script ne puisse l’arrêter, même lorsque Consentl l’empêche de s’exécuter. Marquez manuellement ces balises et supprimez les pixels <noscript> :
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
Les balises chargées par du code (GTM, le chargeur JavaScript d’un pixel) sont bloquées sans requête lorsque le blocage automatique est activé.
Chaque champ de code personnalisé accepte jusqu’à 50 000 caractères ; le chargeur tient sur une ligne.
Webflow n’a pas de bannière de cookies intégrée à désactiver. Supprimez toute autre application de bannière.
Content Security Policy. Les sites Enterprise peuvent définir des en-têtes de réponse, dont content-security-policy, sous Site settings → Publishing → Custom headers. Si vous en définissez un, autorisez https://api.consentl.com comme décrit dans le guide pour tout site web. Sans en-tête CSP personnalisé, il n’y a rien à modifier.

Vous êtes bloqué ? Écrivez à support@consentl.com — nous répondons en anglais les jours ouvrables.