Désactiver des widgets individuels

gateScript sert à charger une balise script. Mais parfois, ce que vous voulez bloquer est un élément de votre propre interface – un contenu intégré, une bulle de chat, un lien « gérer les cookies » – sans toucher à aucun script. Une simple paire getConsent() / onConsentChange() suffit.

Réagir au consentement

Lisez la valeur actuelle au chargement, puis abonnez-vous aux changements futurs – un visiteur peut changer d’avis plus tard via le bouton de réouverture, les deux sont donc nécessaires :

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

C’est exactement le modèle utilisé par le widget d’audience de la page d’accueil – modifiez la bannière là-bas et regardez-le réagir en direct.

Espace réservé avec un bouton « Activer »

Pour un contenu tiers intégré (une carte, une vidéo, un chat), afficher un simple état « désactivé » est une impasse – donnez au visiteur un moyen d’activer uniquement cet élément, là où il se trouve, plutôt que de le renvoyer vers la bannière :

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

Deux détails importants :

• Fusionner, ne pas écraser. setConsent() remplace l’intégralité de la table des catégories enregistrée – l’appeler avec seulement { marketing: true } annulerait silencieusement toute autre catégorie (par exemple analytics) que le visiteur avait déjà acceptée. Lisez d’abord l’enregistrement actuel et reprenez-le avec l’opérateur de décomposition.
• src différé. La véritable URL de l’iframe reste dans data-src jusqu’à ce que le consentement soit accordé, pour que les cookies propres au contenu intégré ne se chargent jamais avant l’accord du visiteur – c’est l’affectation de iframe.src qui déclenche réellement la requête.

Consultez la référence de l’API JS pour la signature complète de chaque fonction, et Consentement par catégorie pour configurer les catégories elles-mêmes.