Installer FlowConsent sur Framer

Sur Framer, l'extrait de code FlowConsent s'ajoute dans Project Settings → Custom Code → Add Script, placé au début du <head>, puis il faut publier le site. L'installation tient en trois étapes. Le piège principal : le composant Cookie Banner de Framer est une autre bannière de consentement, branchée sur Google Tag Manager ; si vous l'avez ajouté, retirez-le pour ne pas afficher deux bannières.

Avant de commencer

Un compte sur 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) ; sur Pro et Enterprise, il se fait en un clic.
Un projet Framer que vous pouvez modifier et publier. Une bannière RGPD sert en pratique sur votre propre domaine, et Framer réserve le domaine personnalisé aux offres payantes (Site plans). Si l'éditeur vous demande de changer d'offre en ajoutant le script, c'est que votre offre actuelle ne le permet pas.

Étape 1 : copier l'extrait de code

Dans FlowConsent, ouvrez Builder → Déploiement → Intégration, onglet HTML / No-code. L'extrait comporte deux parties, et leur ordre compte :

Project Settings → Custom Code → début du <head>

html

<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. Collez-les ensemble, dans un seul script Framer.

Étape 2 : l'ajouter dans Project Settings → Custom Code

L'interface de Framer est en anglais. Dans votre projet :

Ouvrez Project Settings (selon la version de l'éditeur, Site Settings).
Sélectionnez l'onglet Custom Code dans la barre latérale gauche.
Cliquez sur Add Script si aucun code n'existe encore, sinon sur l'icône +.
Donnez au script un nom clair, par exemple FlowConsent, et collez l'extrait.
Choisissez l'emplacement début de la balise <head> (start of <head>), pour que l'extrait passe avant tout autre script.
Laissez le script actif sur toutes les pages, sans restreindre la liste des pages.
Pour la fréquence d'exécution, choisissez Once : la page charge l'extrait une fois, et c'est la bannière qui suit ensuite les changements de page (voir l'étape 3).

Le code personnalisé ne s'exécute pas dans l'aperçu du canevas : cliquez sur Publish pour mettre l'extrait en ligne, puis testez sur le site publié.

Un site Framer change de page côté navigateur, sans rechargement complet. Activez donc le mode SPA dans les réglages de la bannière : FlowConsent revérifie alors le consentement à chaque navigation. Le principe est détaillé dans le guide Next.js et SPA.

Si vous chargiez Google Tag Manager, Google Analytics ou le Meta Pixel via d'autres scripts Custom Code, aucun ne doit passer avant FlowConsent. Le plus sûr : retirez ces scripts et déclarez les services dans Builder → Services, pour que la bannière ne les charge qu'après consentement. Pour GTM, gardez le conteneur en code personnalisé, mais placé en fin de <head> (end of <head>), donc après l'extrait FlowConsent. Les statistiques intégrées de Framer (Framer Analytics) n'utilisent pas de cookies selon Framer, elles ne passent donc pas par la bannière.

Vérifier l'installation

Ouvrez votre site publié en navigation privée : la bannière doit s'afficher.
Dans l'onglet Réseau des outils de développement, aucune requête tierce (Google, Meta, LinkedIn…) ne doit partir avant le clic sur « Accepter ».
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.
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é.

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 Framer et vérifie qu'il est bien installé sur https://monsite.fr

L'agent ne modifie pas votre projet Framer à votre place : il vous fournit l'extrait, les instructions et la vérification. Voir le serveur MCP et la page MCP.

Avant de commencer

Étape 1 : copier l'extrait de code

Étape 2 : l'ajouter dans Project Settings → Custom Code

Vérifier l'installation

Le faire depuis votre agent IA (MCP)

Questions fréquentes

Pourquoi la bannière n'apparaît-elle pas dans l'aperçu Framer ?

Ai-je besoin d'une bannière si j'utilise seulement Framer Analytics ?

Puis-je ajouter FlowConsent sur une seule page ?

Faut-il passer par Google Tag Manager ?

Mettez votre site en conformité aujourd'hui.