# Installer FlowConsent sur Framer

Sur Framer, ajoutez l'extrait FlowConsent dans Project Settings → Custom Code, au début du <head>, publiez, et n'activez pas le Cookie Banner de Framer.

> Canonical: https://www.flowconsent.com/fr/doc/install-framer
> Last updated: 2026-10-01
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](https://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](/fr/doc/cloudflare-deployment)) ; 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 :

```html title="Project Settings → Custom Code → début du <head>"
<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 :

1. Ouvrez **Project Settings** (selon la version de l'éditeur, **Site Settings**).
2. Sélectionnez l'onglet **Custom Code** dans la barre latérale gauche.
3. Cliquez sur **Add Script** si aucun code n'existe encore, sinon sur l'icône **+**.
4. Donnez au script un nom clair, par exemple `FlowConsent`, et collez l'extrait.
5. Choisissez l'emplacement **début de la balise `<head>`** (start of `<head>`), pour que l'extrait passe avant tout autre script.
6. Laissez le script actif sur toutes les pages, sans restreindre la liste des pages.
7. 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).

## Étape 3 : publier, activer le mode SPA et retirer le Cookie Banner de Framer

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](/fr/doc/nextjs-integration).

> [!WARNING]
> Framer propose son propre composant **Cookie Banner**, qui envoie les choix du visiteur à Google Tag Manager via un identifiant de conteneur. Ne l'utilisez pas en même temps que FlowConsent : deux bannières, ce sont deux choix contradictoires et un consentement impossible à prouver. Supprimez le composant de votre projet (souvent placé dans un composant partagé comme la navigation), puis republiez.

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

1. Ouvrez votre site publié en **navigation privée** : la bannière doit s'afficher.
2. 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 ».
3. 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](/fr/doc/setup-wizard).
4. 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é](/fr/doc/compliance-verification).

## 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](/fr/doc/mcp-server) et [la page MCP](/fr/mcp).

## Questions fréquentes

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

Framer ne charge pas le code personnalisé dans l'aperçu du canevas. Publiez le site et ouvrez l'adresse en ligne, de préférence en navigation privée.

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

Selon Framer, ses statistiques intégrées ne déposent pas de cookies et ne nécessitent pas de consentement. Dès que vous ajoutez un service tiers (Google Analytics, HubSpot, vidéos YouTube…), une bannière devient nécessaire.

### Puis-je ajouter FlowConsent sur une seule page ?

Framer le permet, mais ce n'est pas recommandé : la bannière doit être présente sur toutes les pages pour bloquer les scripts avant consentement et laisser le visiteur modifier son choix partout.

### Faut-il passer par Google Tag Manager ?

Non. FlowConsent ne se charge pas via GTM, car une bannière chargée depuis GTM arrive trop tard pour le blocage préalable. L'extrait se place au début du `<head>`, au-dessus du conteneur GTM. Voir [Google Consent Mode](/fr/doc/google-consent-mode).