Cómo agregar un banner de información basado en una sesión rechazable en Webflow sin cookies

February 18, 2025

· 3 min

Agregue fácilmente un banner descartable basado en sesiones en Webflow: sin cookies, solo JavaScript limpio.

¿Alguna vez necesitaste una forma de mostrar un banner informativo en Webflow que los usuarios pudieran descartar y hacer que volviera a aparecer en su próxima visita? Tal vez para un anuncio, una promoción o algún mensaje amistoso de «oye, esto es importante». Pero este es el truco: no quieres perder el tiempo con las cookies y quieres que sea compatible con Webflow.

Eso es exactamente lo que hace este pequeño fragmento de JavaScript. Utiliza Almacenamiento de sesiones para simplificar las cosas: sin cookies, sin scripts exagerados, solo una forma limpia y eficiente de mostrar un banner por sesión y permitir a los usuarios ocultarlo mientras navegan. Hace un tiempo tuvimos que crearlo para un cliente y ahora lo estamos compartiendo. Vamos a desglosarlo paso a paso. Puede que encuentres algo de redundancia aquí, pero era específico para ese proyecto y tuvimos que solucionar algunos problemas que surgieron, así que lo dejamos aquí. También hay una práctica herramienta para clonar en la parte inferior de la entrada con el script real ejecutándose. No dudes en personalizarlo.

🚀 Qué hace este script

✅ Muestra un banner cuando un usuario inicia una nueva sesión (es decir, cuando abre el sitio en una pestaña nueva o después de cerrar el navegador).
✅ Les permite descartarlo y lo mantiene oculto mientras navegan.
✅ Restablece cada sesión, de modo que la próxima vez que visiten, el banner vuelva a aparecer.
✅ Usos solo atributos para una fácil integración de Webflow (sin necesidad de clases).
✅ No se necesitan cookies—todo se maneja con Almacenamiento de sesiones.

🛠️ Cómo configurarlo en Webflow

1. Agregue el banner en Webflow

Dentro de Webflow, agrega un sencillo bloque div para tu pancarta 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é los atributos? Facilitan la administración en Webflow, especialmente cuando se trabaja con contenido dinámico. No hay necesidad de preocuparse por los conflictos de nombres de clases. Súper fácil, nombra tus clases como quieras.

2. Pegue este script en Webflow

Ahora, ve a Configuración de código personalizado de Webflow y agrega este script justo antes </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 </body>? Garantiza que todos los elementos se hayan cargado antes de que se ejecute el script, lo que evita errores cuando el script intenta seleccionar elementos que aún no existen.

🤔 Cómo funciona

Ahora pasemos a la parte divertida:¿qué está pasando realmente dentro del guion?

1 ️ Encuentra el banner y el botón de cierre

El script busca dos cosas:

El pancarta ([banner-element="componente de banner "])
El botón de cierre ([banner-element="cerrar "])

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

2 ️ Haz que el banner sea visible

Webflow a veces carga elementos ocultos de forma predeterminada, por lo que nos aseguramos de que el banner esté visible configurando:

banner.style.visibility = 'visible';

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

3 ️ Comprobar el almacenamiento de la sesión

El ingrediente mágico: Almacenamiento de sesiones.

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

Esto significa:

Si la pancarta no se ha cerrado en esta sesión → se muestra.
Si el usuario ya lo cerré en esta sesión → permanece oculta.
Puedes configurar el elemento del banner con el atributo activado en una opacidad del 10%.

4 ️ Maneje el clic del botón de cierre

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

Desaparece la pancarta.
Espera 300 ms para que finalice la transición.
Ocultar completamente el banner (pantalla: ninguna;).
Tienda en la que lo cerraron Almacenamiento de sesiones.

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

5 ️ MutationObserver para elementos de flujo web

Webflow a veces carga elementos de forma dinámica, por lo que el script espera hasta que Webflow haya renderizado todo antes de correr:

const observer = new MutationObserver (mutaciones, obs) => { si ( document.querySelector ('[banner-element="banner-component "]') && document.querySelector ('[banner-element="cerrar "]') ) { inicializar Banner (); obs.disconnect (); } });

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

Esto garantiza que el script no falle solo porque Webflow cargó las cosas un poco tarde.

(Si no recuerdo mal, el cliente tenía un montón de Javascript o vídeos cargando y las cosas se retrasaron y, entonces, el guion estaba listo, pero el banner no).