Inaktivera enskilda widgetar

gateScript är till för att ladda en script-tagg. Ibland vill du i stället blockera en del av ditt eget gränssnitt – en inbäddning, en chattbubbla, en ”hantera cookies”-länk – utan att röra något skript alls. Då räcker ett enkelt par av getConsent() och onConsentChange().

Reagera på samtycke

Läs det aktuella värdet vid laddning och prenumerera sedan på framtida ändringar – en besökare kan ändra sig senare via knappen för att öppna igen, så båda behövs:

<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>

Det är exakt det här mönstret som ligger bakom analyswidgeten på startsidan – ändra bannern där och se hur den reagerar direkt.

Platshållare med en ”Aktivera”-knapp

För ett inbäddat tredjepartsinnehåll (en karta, en video, en chattwidget) är ett tomt ”inaktiverat” läge en återvändsgränd – ge besökaren ett sätt att slå på just den saken där den finns, i stället för att skicka tillbaka hen till bannern:

<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>

Två detaljer som spelar roll här:

• Slå ihop, skriv inte över. setConsent() ersätter hela den sparade kategorimappningen – att anropa den med bara { marketing: true } skulle tyst återställa alla andra kategorier (t.ex. analytics) som besökaren redan hade godkänt. Läs den aktuella posten först och sprid in den.
• Fördröjd src. Iframens riktiga URL ligger i data-src tills samtycke har getts, så inbäddningens egna cookies laddas aldrig innan besökaren har gått med på dem – det är när iframe.src sätts som förfrågan faktiskt skickas.

Se JS API-referensen för den fullständiga signaturen för varje funktion, och Samtycke per kategori för att konfigurera själva kategorierna.