Zum Inhalt springen

JavaScript SDK (Client) Integration

Das JS SDK zielt auf höchste Leistung bei null Abhängigkeiten ab. Unsere Plattform löst Ihre Cookie-Verwaltungsanforderungen und ermöglicht es Ihnen, rechtlich bindende Einwilligungen einfach zu erhalten.

Schnellstart

Starten Sie mit einem einzigen Script-Tag. Banner-Design, Cookie-Kategorien, Texte und regionale Compliance (DSGVO, CCPA…) — alles wird über das HashEntry Dashboard verwaltet:

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

Das war’s. Das SDK ruft die an Ihren API-Key gebundene Konfiguration vom Server ab; Banner-Design, Farben, Sprache, Kategorien und Verhaltenseinstellungen werden alle über das Dashboard gesteuert.

Drittanbieter-Skripte blockieren

Markieren Sie Skripte, die nicht vor der Einwilligung ausgeführt werden sollen, mit type="text/plain". Das SDK aktiviert sie automatisch nach der Einwilligung:

<!-- Google Analytics — läuft nicht bis "analytics" genehmigt ist -->
<script type="text/plain" data-cookie-category="analytics">
  (function(i,s,o,g,r,a,m){...})(window,document,'script','https://...');
</script>

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

Einstellungen erneut öffnen

Standard-Icon: Ein dauerhaftes „Cookie-Einstellungen”-Icon erscheint auf dem Bildschirm.
Eigener Button: Icon ausblenden und CMP.show() über Ihren eigenen Footer-Link aufrufen.

Unterstützte `data-*` Attribute

Attribut	Erforderlich	Standard	Beschreibung
`data-site`	✅	—	Site-API-Key
`data-mode`	❌	`local-fallback`	Betriebsmodus: `remote`, `local`, `local-fallback`
`data-language`	❌	`auto`	Banner-Sprache (`auto` = Browser-Erkennung)
`data-region`	❌	`auto`	Region-Override
`data-config`	❌	—	Inline-JSON-Konfiguration (local/local-fallback)
`data-debug`	❌	`false`	Entwicklermodus
`data-headless`	❌	`false`	UI-loser Modus

JavaScript API (`window.CMP`)

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

CMP.show();
CMP.hide();
CMP.accept();
CMP.accept({ marketing: false });
CMP.reject();

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

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

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

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

Pre-init Queue

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

Erweitert: Betriebsmodi

Modus	Verhalten	`data-site`	Server
`remote`	Konfiguration vom Server abrufen	Erforderlich	Erforderlich
`local`	Gesamte Konfiguration von der Seite	Optional	Keiner
`local-fallback` (Standard)	Server versuchen, bei Fehler local verwenden	Optional	Bevorzugt

Local-Modus

Komplett ohne Server betreiben. Ideal für Testumgebungen und Offline-Szenarien.

<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": "Cookie-Einstellungen",
        "description": "Diese Website verwendet Cookies.",
        "accept_button_text": "Alle akzeptieren",
        "reject_button_text": "Alle ablehnen",
        "settings_button_text": "Einstellungen",
        "save_selected_text": "Ausgewählte akzeptieren",
        "close_text": "Schließen",
        "widget_label": "Cookies"
      },
      "categories": [
        {
          "key": "necessary",
          "label": "Notwendig",
          "description": "Für grundlegende Website-Funktionen erforderlich.",
          "required": true
        },
        {
          "key": "analytics",
          "label": "Analytik",
          "description": "Besucherstatistiken.",
          "required": false
        },
        {
          "key": "marketing",
          "label": "Marketing",
          "description": "Personalisierte Werbung.",
          "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="de" async></script>
</head>

Erweitert: Regionserkennung (`region_detection`)

Methode	Funktionsweise	Netzwerkanfrage
`timezone`	Länderschätzung anhand der Browser-Zeitzone (120+ Zuordnungen)	Nein
`freegeoip`	Kostenloser IP→Land-Dienst (3s Timeout, Fallback auf Timezone)	Ja

Live Playground