# Installer FlowConsent sur un site sur mesure (HTML)

Installer FlowConsent sur un site HTML, PHP, Django, Rails, Laravel, Hugo, Jekyll ou Eleventy : coller l'extrait de code une fois dans le <head> du gabarit.

> Canonical: https://www.flowconsent.com/fr/doc/install-html
> Last updated: 2026-10-01
Sur un site développé sur mesure, l'extrait de code FlowConsent se colle **une seule fois**, tout en haut du `<head>` du gabarit partagé par toutes vos pages (layout, en-tête inclus, template de base), avant tout autre script. L'installation tient en deux étapes : copier l'extrait de code, puis le placer dans ce gabarit commun. Les deux pièges habituels : une Content-Security-Policy qui bloque la bannière, et une navigation côté client qui demande le mode SPA.

## Avant de commencer

- Un compte sur [app.flowconsent.com](https://app.flowconsent.com) (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
- Une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare ([guide Cloudflare](/fr/doc/cloudflare-deployment)) ; sur Pro et Enterprise, il se fait en un clic.
- Un accès au code source de votre site et à son processus de mise en ligne.

## Étape 1 : copier l'extrait de code

Ouvrez **Builder → Déploiement → Intégration** et copiez l'extrait de code de l'onglet **HTML / No-code**. Il comporte deux parties, dans cet ordre : le stub Google Consent Mode v2 (valeurs `denied` par défaut), puis le chargeur de la bannière.

```html title="Tout en haut du <head>"
<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>

  <meta charset="utf-8">
  <!-- vos autres balises et scripts viennent après -->
</head>
```

Tout script placé au-dessus de cet extrait de code échappe au blocage préalable : il doit donc précéder Google Analytics, Meta Pixel, Google Tag Manager et tout autre traceur.

## Étape 2 : le coller une fois dans le gabarit commun

Cherchez le fichier qui produit le `<head>` de toutes vos pages. Selon votre technologie :

- **Site HTML statique** : sans gabarit, chaque fichier `.html` a son propre `<head>`. Collez l'extrait de code dans chacun (une recherche et remplacement sur `<head>` suffit), ou passez par une inclusion côté serveur si votre hébergeur le permet.
- **PHP** : l'en-tête commun, souvent `header.php`, inclus dans chaque page par `include` ou `require`.
- **Laravel** : le layout Blade, par exemple `resources/views/layouts/app.blade.php`.
- **Django** : le gabarit de base (souvent `templates/base.html`) que vos pages étendent avec `{% extends "base.html" %}`.
- **Ruby on Rails** : `app/views/layouts/application.html.erb`.
- **Hugo** : le gabarit de base `layouts/baseof.html` (`layouts/_default/baseof.html` dans les versions antérieures à Hugo 0.146), ou le partial `head.html` qu'il appelle. Avec un thème, copiez ce fichier dans le dossier `layouts/` de votre projet plutôt que de modifier le thème.
- **Jekyll** : le layout `_layouts/default.html`, ou `_includes/head.html` avec un thème comme Minima. Pour surcharger un fichier du thème, copiez-le au même chemin dans votre site.
- **Eleventy** : le layout de base rangé dans `_includes/` (par exemple `_includes/base.njk`), appelé par la clé `layout` du front matter.

L'extrait de code est du HTML standard : aucun moteur de gabarit ne demande d'échappement. Si votre site a plusieurs layouts racines, répétez l'opération dans chacun. Reconstruisez ou redéployez ensuite le site.

Ne collez pas vos traceurs (Google Analytics, Meta Pixel…) en dur dans le gabarit : déclarez-les dans **Builder → Services**, la bannière ne les charge qu'après consentement. Pour Google Tag Manager, voir le [guide dédié](/fr/doc/install-google-tag-manager).

## Content-Security-Policy et navigation côté client

> [!WARNING]
> Si votre site envoie un en-tête `Content-Security-Policy`, la bannière est bloquée tant que son domaine n'y figure pas. Autorisez le domaine de votre extrait de code dans `script-src` (chargement du script) et dans `connect-src` (requêtes de la bannière vers ce même domaine) : `https://*.consent.flowconsent.com` sur Pro et Enterprise, l'URL de votre Worker Cloudflare sur l'offre Free. Le stub étant un script en ligne, il lui faut aussi un `nonce`, un hash `sha256-…` (à recalculer si vous modifiez l'extrait de code) ou `'unsafe-inline'`.

```text title="Exemple d'en-tête (Pro et Enterprise)"
Content-Security-Policy: script-src 'self' 'nonce-RANDOM' https://*.consent.flowconsent.com; connect-src 'self' https://*.consent.flowconsent.com
```

Ajoutez alors `nonce="RANDOM"` aux deux balises `<script>` de l'extrait de code, avec une valeur générée à chaque réponse. Les services que la bannière charge après consentement doivent eux aussi être autorisés, comme sans FlowConsent. En cas de blocage, la console du navigateur indique la directive et le domaine refusés.

> [!NOTE]
> Si votre site navigue sans recharger la page (Turbo dans Rails, `wire:navigate` de Livewire, `hx-boost` d'htmx, un framework JavaScript), activez le **mode SPA** dans l'onglet **Réglages** du Builder, puis redéployez la bannière : le consentement est revérifié à chaque navigation côté client. Détails dans le [guide Next.js et SPA](/fr/doc/nextjs-integration).

## Vérifier l'installation

1. Ouvrez le site en ligne en navigation privée : la bannière s'affiche.
2. Dans l'onglet **Réseau**, aucune requête vers un service tiers ne part avant le clic sur **Accepter**. La **Console** ne signale aucune violation CSP.
3. Lancez l'[assistant d'installation](/fr/doc/setup-wizard) (Builder → Intégration) : il contrôle la page en ligne (chargeur présent avec le bon code de licence, stub Consent Mode présent et placé avant chaque tag Google).
4. Terminez par un scan de refus depuis l'onglet **Conformité** ([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 récupère l'extrait de code et les consignes de placement (`get_banner_snippet`, `get_setup_instructions`), vérifie l'installation par un vrai scan (`verify_consent_compliance`) et peut poser une surveillance récurrente (`monitor_compliance`). C'est vous, ou votre agent de code, qui modifiez le gabarit : le serveur MCP fournit l'extrait, les instructions et la vérification.

Exemple de demande :

> Donne-moi l'extrait de code de ma bannière pour mon site HTML sur mesure, dis-moi où le placer dans mon gabarit, puis vérifie qu'il est bien installé sur https://monsite.fr

En savoir plus : [serveur MCP](/fr/doc/mcp-server) et [FlowConsent pour les agents IA](/fr/mcp).

## Questions fréquentes

### Faut-il coller l'extrait de code sur chaque page ?

Il doit être présent sur chaque page, mais vous ne le collez qu'une fois si vos pages partagent un gabarit. Seul un site en HTML pur sans gabarit demande de l'ajouter fichier par fichier.

### Puis-je le placer en bas de `<body>` ?

Non. Le stub Consent Mode doit s'exécuter avant tout traceur : en bas de page, les scripts situés plus haut seraient déjà partis. Placez-le tout en haut du `<head>`.

### La bannière ne s'affiche pas : par où commencer ?

Ouvrez la console du navigateur. Une erreur CSP indique un domaine à autoriser. Sinon, vérifiez que l'extrait de code figure bien dans le HTML servi (code source de la page), avec votre code de licence.

### Mon site est généré statiquement : la bannière fonctionne-t-elle sans serveur ?

Oui. L'extrait de code s'exécute dans le navigateur : il fonctionne sur n'importe quel hébergement de fichiers statiques.