La bannière FlowConsent tient en un seul <script> autonome : le même extrait de code fonctionne sur Next.js, Nuxt, SvelteKit et toute application codée sur mesure, exactement comme sur Webflow, Framer ou WordPress. Il y a une étape supplémentaire pour les applications monopages (SPA) : activer le mode SPA afin que le consentement soit revérifié lors des navigations côté client.

Pourquoi une SPA demande une étape de plus

Sur un site multipage classique, chaque navigation recharge entièrement la page : la bannière se réexécute et bloque de nouveau les scripts de suivi à chaque page. Une application monopage (Next.js, React, Vue…) navigue avec history.pushState, sans rechargement : sans le mode SPA, les scripts injectés après la première page ne seraient pas rebloqués sur les routes suivantes.

Le mode SPA intercepte pushState, replaceState et popstate pour revérifier le consentement à chaque navigation côté client.

Étape 1 : ajouter le script

La bannière embarque déjà les valeurs par défaut de Google Consent Mode v2 dans son script : l'extrait de code reste donc minimal : il suffit de charger le script le plus tôt possible.

App Router (`app/layout.tsx`)

tsx

import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {/* FlowConsent CMP */}
        <Script
          src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  )
}

strategy="beforeInteractive" charge le script avant l'hydratation, afin que le blocage préalable soit en place avant tout déclenchement de suivi.

Pages Router (`pages/_document.tsx`)

tsx

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        {/* FlowConsent CMP : à placer en premier dans <Head> */}
        <script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vous trouverez votre extrait de code exact (avec votre URL de déploiement et votre code de licence) dans Builder → Déploiement → Intégration, où un onglet Next.js génère ce code pour vous.

Étape 2 : activer le mode SPA

Dans l'éditeur (Builder), ouvrez l'onglet Réglages et activez le mode SPA. Redéployez votre bannière pour appliquer le changement.

Avec le mode SPA activé, FlowConsent va :

Intercepter history.pushState et history.replaceState
Écouter les événements popstate
Bloquer de nouveau les scripts de suivi non autorisés à chaque navigation
Émettre un événement flowconsent:navigation auquel vous pouvez vous abonner

Étape 3 : laisser FlowConsent gérer les scripts de suivi

Ne chargez pas les scripts de suivi (Google Analytics, Meta Pixel…) avec next/script. Déclarez-les plutôt dans Builder → Services et laissez FlowConsent les injecter une fois le consentement donné.

tsx

// À éviter : script de tracking hors du contrôle de FlowConsent
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />
 
// À privilégier : configurez Google Analytics dans Builder → Services

Facultatif : réagir au consentement dans votre application

FlowConsent émet des événements auxquels vous pouvez vous abonner :

tsx

import { useEffect } from 'react'
 
export function useConsentListener() {
  useEffect(() => {
    const onConsent = (event) => {
      const { preferences } = event.detail
      if (preferences?.analytics) {
        // consentement analytics accordé : initialisez votre propre analytics
      }
    }
    window.addEventListener('flowconsent:consent', onConsent)
    return () => window.removeEventListener('flowconsent:consent', onConsent)
  }, [])
}

Liste de vérification

Le script est dans app/layout.tsx (App Router) ou pages/_document.tsx (Pages Router)
L'App Router utilise strategy="beforeInteractive"
Le mode SPA est activé dans l'éditeur et la bannière redéployée
Aucun next/script pour les scripts de suivi : ils sont configurés dans Services
La bannière apparaît au premier chargement
Aucune requête de suivi dans l'onglet Réseau avant de cliquer sur Accepter
Le consentement persiste à travers les navigations côté client

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 et les instructions de placement (outils get_banner_snippet et get_setup_instructions), vérifie l'installation par un vrai scan (verify_consent_compliance) et peut poser une surveillance récurrente (monitor_compliance). Il ne modifie pas votre application Next.js à votre place : le collage reste de votre côté.

Exemple de demande : « Donne-moi l'extrait de code de ma bannière pour mon application Next.js et vérifie qu'il est bien installé sur https://monsite.fr ».

Voir le guide du serveur MCP et la page FlowConsent MCP.

Intégration Next.js et SPA React