Desactivar widgets individuales

gateScript sirve para cargar una etiqueta de script. A veces lo que quieres bloquear es una parte de tu propia interfaz (un contenido incrustado, una burbuja de chat, un enlace de “gestionar cookies”) sin tocar ningún script. Para eso basta con la pareja getConsent() / onConsentChange().

Reaccionar al consentimiento

Lee el valor actual al cargar y suscríbete a los cambios futuros: un visitante puede cambiar de opinión más tarde con el botón para volver a abrir, así que necesitas ambas cosas:

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

Es exactamente el patrón que hay detrás del widget de analítica de la página de inicio: cambia el banner allí y verás cómo reacciona en directo.

Marcador de posición con un botón “Activar”

Para un contenido incrustado de terceros (un mapa, un vídeo, un chat), mostrar solo un estado “desactivado” es un callejón sin salida: dale al visitante una forma de activar solo ese elemento, justo donde está, en lugar de mandarlo de vuelta al banner:

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

Dos detalles importantes:

• Combina, no sobrescribas. setConsent() sustituye todo el mapa de categorías guardado: llamarlo solo con { marketing: true } revertiría en silencio cualquier otra categoría (por ejemplo, analytics) que el visitante ya hubiera aceptado. Lee primero el registro actual y propágalo.
• src diferido. La URL real del iframe se guarda en data-src hasta que se concede el consentimiento, así que las cookies propias del contenido incrustado nunca se cargan antes de que el visitante las acepte: asignar iframe.src es el momento en que se lanza la solicitud.

Consulta la referencia de la API JS para ver la firma completa de cada función, y Consentimiento por categoría para configurar las categorías.