Documentation

Guide d'intégration

Tout ce dont vous avez besoin pour installer ConsentLab sur votre site en quelques minutes.

1. Démarrage rapide

Mettre en place ConsentLab sur votre site prend moins de deux minutes. Voici les quatre étapes.

1
Créer votre compte Inscrivez-vous gratuitement sans carte bancaire. Le plan gratuit inclut 5 000 sessions/mois et des domaines illimités.
2
Ajouter votre domaine — Depuis votre dashboard, cliquez sur + Ajouter un domaine et saisissez l'URL de votre site (ex. : monsite.fr).
3
Copier le snippet — ConsentLab génère automatiquement un tag <script> personnalisé avec votre clé API. Copiez-le en un clic depuis votre dashboard.
4
C'est tout. — Collez le snippet dans le <head> de votre site. Le bandeau apparaît immédiatement pour vos visiteurs.

2. Installation

Le même snippet fonctionne sur toutes les plateformes. Remplacez VOTRE_CLE_API par la clé générée dans votre dashboard.

HTMLHTML / Site custom

Copiez-collez le tag script dans la balise <head> de votre HTML, avant la balise fermante </head>.

html
<script
  src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
  data-cc-key="VOTRE_CLE_API"
  defer
></script>
Placez le script le plus tôt possible dans le <head>pour qu'il s'initialise avant le reste de vos outils tiers.

WordPressWordPress

Deux options au choix :

  1. Installez le plugin officiel ConsentLab depuis le répertoire WordPress, puis allez dans Extensions → Réglages → ConsentLab et collez votre clé API.
  2. Ou collez directement le snippet via Apparence → Éditeur de thème → header.php (ou via un plugin d'injection de code comme Insert Headers and Footers).
html
<script
  src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
  data-cc-key="VOTRE_CLE_API"
  defer
></script>

ShopifyShopify

L'application ConsentLab pour Shopify est disponible prochainement sur le Shopify App Store.

En attendant, collez le snippet manuellement dans Online Store → Themes → Edit code → layout/theme.liquid, juste avant la balise fermante </head>.

html
<script
  src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
  data-cc-key="VOTRE_CLE_API"
  defer
></script>

Next.jsNext.js / React

Ajoutez le snippet dans le <head> global de votre application.

App Router — app/layout.tsx :

tsx
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <head>
        <script
          src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
          data-cc-key="VOTRE_CLE_API"
          defer
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router — pages/_document.tsx :

tsx
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="fr">
      <Head>
        <script
          src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
          data-cc-key="VOTRE_CLE_API"
          defer
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

WixSquarespaceWix / Squarespace

Ces plateformes permettent d'injecter du code personnalisé via leurs paramètres :

  • Wix : Tableau de bord → Paramètres → Code personnalisé → Ajouter du code → <head>
  • Squarespace : Paramètres → Avancé → Injection de code → En-tête
html
<script
  src="https://cdn.consentlab.eu/widget/v1/cookie-cmp.min.js"
  data-cc-key="VOTRE_CLE_API"
  defer
></script>

3. Configuration

Toute la configuration se fait depuis votre dashboard ConsentLab — aucune modification de code nécessaire.

Personnalisation visuelle

Couleurs, position (bas, haut, centre), texte des boutons, langue par défaut — tout est configurable depuis le dashboard sans toucher au code.

Catégories de cookies

Configurez les catégories exposées à vos visiteurs : Nécessaires (toujours actifs), Analytiques, Marketing et Préférences.

Multi-langue

Le widget détecte automatiquement la langue du navigateur de vos visiteurs. Traductions disponibles : FR, EN, DE, ES, IT, NL et plus.

Google Consent Mode v2

Activé automatiquement, sans aucune configuration. Les signaux ad_storage, analytics_storage, etc. sont envoyés dès que le visiteur fait son choix.

4. Blocage de scripts

Pour vous assurer qu'aucun script tiers ne s'exécute avant que le visiteur ait donné son consentement, ConsentLab prend en charge le blocage natif via deux attributs HTML.

Comment ça marche :

  1. Remplacez type="text/javascript" par type="text/plain" — le navigateur ignore le script.
  2. Ajoutez data-cc="analytics" (ou marketing, preferences).
  3. ConsentLab réactive automatiquement le script quand le visiteur accepte la catégorie correspondante.
html
<script type="text/plain" data-cc="analytics">
  // Google Analytics code here
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
Pour les scripts chargés via src=, combinez type="text/plain" et data-cc= de la même façon. ConsentLab restaurera le type et rechargera le script après consentement.

Valeurs supportées pour data-cc :

analyticsmarketingpreferences

5. Vérification DNS (optionnel)

La vérification DNS prouve que vous êtes bien propriétaire du domaine sur lequel le widget est installé. Elle est recommandée pour tous les sites en production.

Pourquoi vérifier ?

Empêche qu'un tiers utilise votre clé API sur un autre domaine. Ajoute un indicateur de confiance dans votre dashboard.

Comment faire ?

Ajoutez un enregistrement TXT dans les DNS de votre nom de domaine (chez votre registrar ou hébergeur DNS).

Où trouver le token ?

Dans votre dashboard : Paramètres → Sous-domaines → Vérifier. Le token unique à copier s'affiche.

Exemple d'enregistrement TXT à ajouter dans votre DNS :

dns
Type  : TXT
Nom   : _consentlab.monsite.fr
Valeur: consentlab-verify=xxxxxxxxxxxxxxxxxxxxxxxx
La propagation DNS peut prendre jusqu'à 48h, mais est généralement effective en moins d'une heure. Cliquez sur Vérifierdans votre dashboard une fois l'enregistrement TXT ajouté.

6. FAQ technique

Une question non couverte ici ?

Notre équipe répond en moins de 24h, du lundi au vendredi.