Aller au contenu

Intégration du SDK JavaScript (Client)

Le SDK JS vise les meilleures performances avec zéro dépendance. Notre plateforme résout vos besoins de gestion des cookies et vous permet d’obtenir facilement des consentements juridiquement contraignants.

Démarrage Rapide

Commencez avec une seule balise script. Design du bandeau, catégories de cookies, textes et conformité régionale (RGPD, CCPA…) — tout est géré depuis le tableau de bord HashEntry :

<head>
  <script
    src="https://tool.hashentry.com/cmp.js"
    data-site="VOTRE_CLE_API_SITE"
    async
  ></script>
</head>

C’est tout. Le SDK récupère la configuration liée à votre clé API depuis le serveur ; le design, les couleurs, la langue, les catégories et les paramètres sont tous contrôlés depuis le tableau de bord.

Blocage des Scripts Tiers

Marquez les scripts qui ne doivent pas s’exécuter avant le consentement avec type="text/plain" :

<script type="text/plain" data-cookie-category="analytics">
  // Google Analytics — ne s'exécute pas tant que "analytics" n'est pas approuvé
</script>

<script type="text/plain" data-cookie-category="marketing"
        data-src="https://connect.facebook.net/en_US/fbevents.js">
</script>

Réouverture des Préférences

Icône par défaut : Une icône persistante « Préférences de cookies » apparaît à l’écran.
Bouton personnalisé : Masquez l’icône et appelez CMP.show() depuis votre propre lien de pied de page.

Attributs `data-*` Supportés

Attribut	Requis	Défaut	Description
`data-site`	✅	—	Clé API du site
`data-mode`	❌	`local-fallback`	Mode : `remote`, `local`, `local-fallback`
`data-language`	❌	`auto`	Langue du bandeau (`auto` = détection navigateur)
`data-region`	❌	`auto`	Override de région
`data-config`	❌	—	Configuration JSON inline (mode local)
`data-debug`	❌	`false`	Mode développeur
`data-headless`	❌	`false`	Mode sans interface

API JavaScript (`window.CMP`)

CMP.ready(() => { console.log('HashEntry CMP chargé.'); });

CMP.show();
CMP.hide();
CMP.accept();
CMP.reject();

const consent = CMP.getConsent();
CMP.hasConsent('analytics');

CMP.setMetadata({ order_id: 'ORD-54321' });

CMP.showDocumentApproval('cgv', { transaction_id: 'TRX-101' })
  .then(result => { if (result.approved) console.log("Approuvé !", result.proof_hash); });

CMP.on('consent:given', (data) => { console.log("Consentement :", data.categories); });

File d’Attente Pre-init

<script>
window.__CMP_QUEUE = window.__CMP_QUEUE || [];
window.__CMP_QUEUE.push(['setMetadata', { order_id: 'ORD-12345' }]);
window.__CMP_QUEUE.push(['setRegion', 'FR']);
</script>

Avancé : Modes de Fonctionnement

Mode	Comportement	`data-site`	Serveur
`remote`	Config récupérée du serveur	Requis	Requis
`local`	Toute la config fournie par la page	Optionnel	Aucun
`local-fallback` (défaut)	Essaie le serveur, revient au local en cas d’échec	Optionnel	Préféré

Mode Local

Fonctionner entièrement sans serveur. Idéal pour les environnements de test et les scénarios hors ligne.

<head>
  <script type="application/json" id="cmp-config">
  {
    "banner_config": {
      "layout": "bottom_bar",
      "region_detection": "timezone",
      "theme": {
        "primary_color": "#2563EB",
        "font_family": "system",
        "theme_mode": "auto",
        "widget_icon": "cookie",
        "widget_position": "bottom_left"
      },
      "content": {
        "title": "Vos Préférences de Cookies",
        "description": "Ce site web utilise des cookies pour améliorer votre expérience.",
        "accept_button_text": "Tout Accepter",
        "reject_button_text": "Tout Refuser",
        "settings_button_text": "Gérer les Préférences",
        "save_selected_text": "Accepter la Sélection",
        "close_text": "Fermer",
        "widget_label": "Préférences de Cookies"
      },
      "categories": [
        {
          "key": "necessary",
          "label": "Nécessaires",
          "description": "Requis pour le fonctionnement de base.",
          "required": true
        },
        {
          "key": "analytics",
          "label": "Analytiques",
          "description": "Statistiques de visiteurs.",
          "required": false
        },
        {
          "key": "marketing",
          "label": "Marketing",
          "description": "Publicités personnalisées.",
          "required": false
        }
      ],
      "mobile_layout": "bottom_bar",
      "behavior": {
        "show_reject_button": true,
        "show_settings_button": true,
        "show_widget": true,
        "show_powered_by": true,
        "block_page_scroll": false,
        "modal_layout": "sidebar_right",
        "cookie_display_mode": "vendor",
        "banner_animation": "slide_fade",
        "modal_tabs": true,
        "record_informational_consent": false
      }
    }
  }
  </script>
  <script src="https://tool.hashentry.com/cmp.js" data-mode="local" data-language="fr" async></script>
</head>

Avancé : Détection de Région (`region_detection`)

Méthode	Fonctionnement	Requête Réseau
`timezone`	Estimation du pays via le fuseau horaire du navigateur (120+ correspondances)	Non
`freegeoip`	Service gratuit IP→pays (timeout 3s, fallback sur timezone)	Oui

Playground