Einzelne Widgets deaktivieren

gateScript ist zum Laden eines Script-Tags gedacht. Manchmal willst du aber ein Stück deiner eigenen Oberfläche blockieren – ein Embed, eine Chat-Blase, einen „Cookies verwalten“-Link –, ganz ohne Skript. Dafür reicht ein einfaches Paar aus getConsent() und onConsentChange().

Auf die Einwilligung reagieren

Lies beim Laden den aktuellen Wert aus und abonniere dann spätere Änderungen – ein Besucher kann seine Meinung über den Button zum erneuten Öffnen später ändern, daher brauchst du beides:

<div id="widget">Waiting for consent…</div>

<script>
  import { getConsent, onConsentChange } from 'astro-cookie-consent';

  const widget = document.getElementById('widget');

  function render(value: 'accept' | 'decline' | null) {
    if (!widget) return;
    widget.textContent = value === 'accept' ? 'Widget enabled' : 'Widget disabled';
  }

  render(getConsent('analytics'));
  onConsentChange(() => render(getConsent('analytics')));
</script>

Genau dieses Muster steckt hinter dem Analyse-Widget auf der Startseite – schalte dort das Banner um und sieh zu, wie es live reagiert.

Platzhalter mit einem „Aktivieren“-Button

Bei einem Drittanbieter-Embed (einer Karte, einem Video, einem Chat-Widget) ist ein bloßer „deaktiviert“-Zustand eine Sackgasse – gib dem Besucher die Möglichkeit, genau dieses eine Element direkt an Ort und Stelle einzuschalten, statt ihn zurück zum Banner zu schicken:

<div id="map">
  <div class="placeholder">
    <p>This map needs the <strong>marketing</strong> category.</p>
    <button id="enable-map">Enable map</button>
  </div>
  <iframe data-src="https://maps.example.com/embed" hidden></iframe>
</div>

<script>
  import { getConsent, getConsentRecord, setConsent, onConsentChange } from 'astro-cookie-consent';

  const placeholder = document.querySelector('#map .placeholder');
  const iframe = document.querySelector('#map iframe');
  const button = document.getElementById('enable-map');

  function render(value: 'accept' | 'decline' | null) {
    const accepted = value === 'accept';
    placeholder.hidden = accepted;
    iframe.hidden = !accepted;
    if (accepted && !iframe.src) iframe.src = iframe.dataset.src; // load once, lazily
  }

  render(getConsent('marketing'));
  onConsentChange(() => render(getConsent('marketing')));

  button.addEventListener('click', () => {
    // Merge with the existing record — setConsent replaces the whole
    // categories map, so pass the others through untouched instead of
    // only the one this button knows about.
    const current = getConsentRecord()?.categories ?? {};
    setConsent({ ...current, marketing: true });
  });
</script>

Zwei Details, auf die es hier ankommt:

• Zusammenführen statt überschreiben. setConsent() ersetzt die gesamte gespeicherte Kategorien-Zuordnung – ein Aufruf nur mit { marketing: true } würde stillschweigend jede andere Kategorie (z. B. analytics) zurücksetzen, die der Besucher bereits akzeptiert hatte. Lies zuerst den aktuellen Datensatz und übernimm ihn per Spread.
• Verzögertes src. Die echte URL des iframes steht in data-src, bis die Einwilligung erteilt ist, sodass die eigenen Cookies des Embeds nie laden, bevor der Besucher zugestimmt hat – erst das Setzen von iframe.src löst die Anfrage tatsächlich aus.

In der JS-API-Referenz findest du die vollständige Signatur jeder Funktion, und unter Einwilligung pro Kategorie erfährst du, wie du die Kategorien selbst einrichtest.