Cómo añadir un banner informativo descartable basado en la sesión en Webflow (sin cookies)

¿Alguna vez has necesitado mostrar un banner informativo en Webflow que los usuarios puedan cerrar, pero que vuelva a aparecer en su próxima visita? Quizá para un anuncio, una promoción o algún mensaje amistoso del tipo «oye, esto es importante». Pero hay un detalle: no quieres lidiar con cookies y quieres que encaje bien con Webflow.

Eso es justo lo que hace este pequeño fragmento de JavaScript. Usa sessionStorage para mantenerlo todo simple: sin cookies, sin scripts pesados, solo una forma limpia y eficiente de mostrar un banner por sesión y dejar que los usuarios lo oculten mientras navegan. Tuvimos que crearlo para un cliente hace un tiempo y ahora lo compartimos. Vamos a repasarlo paso a paso. Puede que encuentres algo de redundancia, pero era específica de ese proyecto y tuvimos que corregir algunos problemas que surgieron, así que la dejamos. Además, al final de la entrada hay un cloneable muy útil con el script funcionando. Siéntete libre de personalizarlo. Si estás sopesando las cookies y el consentimiento en general, también escribimos sobre qué pasa con tus datos de analítica cuando la mayoría de los visitantes rechaza las cookies.

Qué hace este script

• Muestra un banner cuando el usuario inicia una sesión nueva (es decir, cuando abre tu sitio en una pestaña nueva o después de cerrar el navegador).
• Le permite cerrarlo y lo mantiene oculto mientras navega.
• Se reinicia en cada sesión, así que la próxima vez que visite el sitio, el banner vuelve a aparecer.
• Usa solo atributos para integrarse fácilmente con Webflow (sin necesidad de clases).
• No necesita cookies: todo se gestiona con sessionStorage.

Cómo configurarlo en Webflow

1. Añade el banner en Webflow

En Webflow, añade un simple div block para tu banner y un botón para cerrarlo. Pero en lugar de usar clases, usaremos atributos personalizados.

Estructura:

<div banner-element="banner-component">
  <p>This is an important message for your visitors.</p>
  <button banner-element="close">Got it</button>
</div>

¿Por qué atributos? Son más fáciles de gestionar en Webflow, sobre todo cuando se trabaja con contenido dinámico. No hay que preocuparse por conflictos de nombres de clases. Súper fácil: ponle a tus clases el nombre que quieras. (Si aún estás decidiendo qué sistema de nombres de clases usar, escribimos sobre si Finsweet Client-First es lo adecuado para ti.)

2. Pega este script en Webflow

Ahora ve a los ajustes de Custom Code de Webflow y añade este script justo antes de </body>.

<script>
document.addEventListener('DOMContentLoaded', function () {
  function initializeBanner() {
    const banner = document.querySelector('[banner-element="banner-component"]');
    const closeButton = document.querySelector('[banner-element="close"]');

    if (!banner || !closeButton) {
      return;
    }

    banner.style.visibility = 'visible';

    if (!sessionStorage.getItem('banner-closed')) {
      banner.style.opacity = '1';
    } else {
      banner.style.display = 'none';
    }

    closeButton.addEventListener('click', function () {
      banner.style.opacity = '0';
      setTimeout(() => {
        banner.style.display = 'none';
      }, 300);
      sessionStorage.setItem('banner-closed', 'true');
    });
  }

  const observer = new MutationObserver((mutations, obs) => {
    if (
      document.querySelector('[banner-element="banner-component"]') &&
      document.querySelector('[banner-element="close"]')
    ) {
      initializeBanner();
      obs.disconnect();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

¿Por qué colocarlo antes de </body>? Así te aseguras de que todos los elementos se hayan cargado antes de que se ejecute el script, evitando errores en los que el script intenta seleccionar elementos que todavía no existen. Si quieres ayuda para escribir o ajustar código personalizado como este, consulta nuestra entrada sobre cómo escribir código personalizado para Webflow con ChatGPT.

Cómo funciona

Ahora viene lo divertido: ¿qué ocurre realmente dentro del script?

Paso 1: Encontrar el banner y el botón de cierre

El script busca dos cosas:

• El banner ([banner-element="banner-component"])
• El botón de cierre ([banner-element="close"])

Si falta alguno de los dos, el script deja de ejecutarse para evitar errores.

Paso 2: Hacer visible el banner

A veces Webflow carga los elementos ocultos por defecto, así que nos aseguramos de que el banner sea visible con esta línea:

banner.style.visibility = 'visible';

(Creo que el cliente para el que lo escribimos originalmente tenía el elemento del banner configurado como oculto)

Paso 3: Comprobar el almacenamiento de sesión

El ingrediente mágico: sessionStorage.

if (!sessionStorage.getItem('banner-closed')) {
  banner.style.opacity = '1';
} else {
  banner.style.display = 'none';
}

Esto significa que:

• Si el banner no se ha cerrado en esta sesión → se muestra.
• Si el usuario ya lo cerró en esta sesión → permanece oculto.
• El script solo cambia la opacidad a 1, así que en el Designer puedes dejar el elemento del banner con un 0 % de opacidad y una transición de opacidad de 300 ms. Así aparece con un fundido y desaparece con otro al cerrarlo.

Paso 4: Gestionar el clic en el botón de cierre

Cuando el usuario hace clic en el botón de cierre, nosotros:

• Hacemos un fundido de salida del banner.
• Esperamos 300 ms a que termine la transición.
• Ocultamos el banner por completo (display: none;).
• Guardamos en sessionStorage que lo cerró.

closeButton.addEventListener('click', function () {
  banner.style.opacity = '0';
  setTimeout(() => {
    banner.style.display = 'none';
  }, 300);
  sessionStorage.setItem('banner-closed', 'true');
});

Paso 5: MutationObserver para los elementos de Webflow

A veces Webflow carga los elementos de forma dinámica, así que el script espera a que existan el banner y el botón de cierre antes de ejecutarse:

const observer = new MutationObserver((mutations, obs) => {
 if (
   document.querySelector('[banner-element="banner-component"]') &&
   document.querySelector('[banner-element="close"]')
 ) {
   initializeBanner();
   obs.disconnect();
 }
});

const observer = new MutationObserver((mutations, obs) => {
  if (
    document.querySelector('[banner-element="banner-component"]') &&
    document.querySelector('[banner-element="close"]')
  ) {
    initializeBanner();
    obs.disconnect();
  }
});

Esto ayuda al script a manejar los casos en que Webflow carga las cosas con algo de retraso. Usamos la misma idea de esperar al elemento en nuestra entrada sobre cómo optimizar los vídeos de fondo de Vimeo con un intersection observer.

(Si no recuerdo mal, el cliente tenía muchísimo JavaScript o vídeos cargándose y todo se retrasaba, así que el script estaba listo pero el banner todavía no).

Una advertencia sincera: un MutationObserver solo reacciona a los cambios que ocurren después de empezar a observar, y este script no tiene una comprobación aparte para los elementos que ya están en la página. Si el banner y el botón ya están ahí y no se añade nada más a la página después, el observador nunca se dispara y el banner se queda en su estado inicial oculto. En una prueba rápida en una página estática sencilla, eso fue exactamente lo que pasó. Así que, si tu banner nunca aparece, revisa esto primero.

¡Listo! Se acabaron los banners persistentes

Ahora tienes un banner descartable basado en la sesión en Webflow que:

• Aparece en cada sesión nueva (no queda oculto para siempre).
• Permite a los usuarios ocultarlo sin cookies.
• Usa solo atributos para ser compatible con Webflow.
• Se las arregla con los elementos del banner que Webflow añade tarde.

¡Adelante, pruébalo! Cuéntame si te encuentras con algún problema.

Puedes encontrar el cloneable aquí. Tenemos más en nuestra página de cloneables de Webflow.

Preguntas frecuentes

¿Cómo añado un banner descartable en Webflow sin cookies?

Añade un div block con el atributo banner-element="banner-component" y, dentro, un botón con banner-element="close"; después pega el script justo antes de </body> en los ajustes de Custom Code. Cuando un visitante hace clic en el botón, el script hace un fundido de salida del banner y guarda una marca en sessionStorage, así que no interviene ninguna cookie.

¿Volverá el banner si el visitante recarga la página?

No. sessionStorage sobrevive a las recargas de página, así que un banner cerrado permanece oculto hasta que se cierra la pestaña o el navegador. MDN lo explica así: «Una sesión de página dura mientras la pestaña o el navegador estén abiertos, y sobrevive a las recargas y restauraciones de la página». Encontrarás todos los detalles en la documentación de sessionStorage de MDN.

¿Un banner cerrado sigue oculto en una pestaña nueva?

Normalmente el banner vuelve a mostrarse. Cada pestaña tiene su propia sesión de página, y esa sesión solo es accesible desde esa pestaña en concreto, así que un visitante que escriba tu dirección o llegue desde un resultado de búsqueda en una pestaña nueva verá el banner otra vez. La única excepción es una pestaña abierta desde un enlace de tu sitio. MDN dice: «Abrir una página en una pestaña o ventana nueva crea una sesión nueva con el valor del contexto de navegación de nivel superior, lo cual difiere de cómo funcionan las cookies de sesión». En ese caso, la pestaña nueva empieza con una copia de los datos de sesión de la pestaña original, así que el banner permanece oculto.

¿Cómo mantengo el banner oculto para siempre después de cerrarlo?

Cambia sessionStorage por localStorage en el script. Comparten los mismos métodos, pero localStorage se conserva entre pestañas y visitas, mientras que sessionStorage se borra al cerrar la pestaña. Eso lo convierte en un banner de «no volver a mostrar», que es justo lo contrario de lo que construimos en esta entrada.