Schließbares Banner in Webflow ohne Cookies (sessionStorage)

February 18, 2025

· 5 min

So fügen Sie Webflow mit sessionStorage und reinem JavaScript ein schließbares Info-Banner hinzu: ohne Cookies, attributbasiert und mit Neustart bei jeder neuen Sitzung.

Sie brauchen ein Info-Banner in Webflow, das Besucher schließen können und das bei ihrem nächsten Besuch trotzdem wieder erscheint? Vielleicht für eine Ankündigung, eine Aktion oder einen freundlichen Hinweis nach dem Motto „Das hier ist wichtig“. Der Haken: Sie wollen keine Cookies verwenden, und die Lösung soll sich gut in Webflow einfügen.

Genau das leistet dieses kleine JavaScript-Snippet. Es nutzt sessionStorage, damit alles einfach bleibt: keine Cookies, keine aufgeblähten Skripte, sondern eine saubere, effiziente Lösung, die das Banner einmal pro Sitzung zeigt und es ausblendet, sobald es jemand schließt. Wir mussten das vor einiger Zeit für einen Kunden bauen und teilen es jetzt. Gehen wir es Schritt für Schritt durch. Vielleicht finden Sie hier etwas Redundanz, aber sie war projektspezifisch und half uns, einige auftretende Probleme zu lösen, also haben wir sie drin gelassen. Ganz am Ende des Beitrags gibt es außerdem ein praktisches Cloneable mit dem laufenden Skript. Passen Sie es gern an. Wenn Sie sich allgemeiner mit Cookies und Einwilligung beschäftigen, haben wir auch darüber geschrieben, was mit Ihren Analysedaten passiert, wenn die meisten Besucher Cookies ablehnen.

Was dieses Skript tut

Es zeigt ein Banner, wenn ein Nutzer eine neue Sitzung beginnt (also Ihre Website in einem neuen Tab öffnet oder nachdem er den Browser geschlossen hat).
Es lässt Nutzer das Banner schließen und hält es ausgeblendet, solange sie weiter surfen.
Es wird mit jeder Sitzung zurückgesetzt, sodass das Banner beim nächsten Besuch wieder erscheint.
Es arbeitet ausschließlich mit Attributen und lässt sich so leicht in Webflow integrieren (keine Klassen nötig).
Keine Cookies nötig: Alles läuft über sessionStorage.

So richten Sie es in Webflow ein

1. Das Banner in Webflow hinzufügen

Fügen Sie in Webflow einen einfachen Div-Block für Ihr Banner und einen Button zum Schließen hinzu. Statt Klassen verwenden wir jedoch benutzerdefinierte Attribute.

Struktur:

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

Warum Attribute? Sie lassen sich in Webflow einfacher verwalten, besonders bei dynamischen Inhalten. Sie müssen sich keine Gedanken über Konflikte bei Klassennamen machen. Ganz einfach: Benennen Sie Ihre Klassen, wie Sie möchten. (Wenn Sie noch überlegen, welches Klassen-Namenssystem Sie verwenden sollen, lesen Sie unseren Beitrag dazu, ob Finsweet Client-First zu Ihnen passt.)

2. Dieses Skript in Webflow einfügen

Öffnen Sie nun die Custom-Code-Einstellungen von Webflow und fügen Sie dieses Skript direkt vor </body> ein.

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

Warum vor </body>? So ist sichergestellt, dass alle Elemente geladen sind, bevor das Skript läuft. Das verhindert Fehler, bei denen das Skript Elemente auswählen will, die noch nicht existieren. Wenn Sie Hilfe beim Schreiben oder Anpassen von Custom Code wie diesem möchten, lesen Sie unseren Beitrag über Custom Code für Webflow mit ChatGPT schreiben.

So funktioniert es

Jetzt kommt der spannende Teil: Was passiert eigentlich im Skript?

Schritt 1: Banner und Schließen-Button finden

Das Skript sucht zwei Dinge:

Das Banner ([banner-element="banner-component"])
Den Schließen-Button ([banner-element="close"])

Fehlt eines von beiden, hört das Skript auf zu laufen, um Fehler zu vermeiden.

Schritt 2: Das Banner sichtbar machen

Webflow lädt Elemente manchmal standardmäßig ausgeblendet, daher stellen wir sicher, dass das Banner sichtbar ist, indem wir Folgendes setzen:

banner.style.visibility = 'visible';

(Ich glaube, bei dem Kunden, für den wir das ursprünglich geschrieben haben, war das Banner-Element auf „hidden“ gesetzt.)

Schritt 3: Session Storage prüfen

Die magische Zutat: sessionStorage.

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

Das bedeutet:

Wenn das Banner in dieser Sitzung noch nicht geschlossen wurde → wird es angezeigt.
Wenn der Nutzer es in dieser Sitzung bereits geschlossen hat → bleibt es ausgeblendet.
Das Skript setzt nur die Deckkraft (Opacity) auf 1. Im Designer können Sie das Banner-Element also bei 0 % Opacity mit einem Opacity-Übergang von 300 ms starten lassen. Es blendet dann ein und beim Schließen wieder aus.

Schritt 4: Klick auf den Schließen-Button behandeln

Wenn der Nutzer auf den Schließen-Button klickt, passiert Folgendes:

Das Banner wird ausgeblendet.
Das Skript wartet 300 ms, bis der Übergang abgeschlossen ist.
Das Banner wird vollständig versteckt (display: none;).
In sessionStorage wird gespeichert, dass es geschlossen wurde.

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

Schritt 5: MutationObserver für Webflow-Elemente

Webflow lädt Elemente manchmal dynamisch, daher wartet das Skript, bis das Banner und der Schließen-Button existieren, bevor es läuft:

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();
  }
});

Das hilft dem Skript, wenn Webflow Dinge etwas verspätet lädt. Dieselbe Idee, auf ein Element zu warten, nutzen wir in unserem Beitrag über das Optimieren von Vimeo-Hintergrundvideos mit einem Intersection Observer.

(Soweit ich mich erinnere, hatte der Kunde entweder sehr viel JavaScript oder Videos, die geladen wurden, und alles verzögerte sich. Das Skript war dann bereit, das Banner aber noch nicht.)

Eine ehrliche Einschränkung: Ein MutationObserver reagiert nur auf Änderungen, die nach dem Start der Beobachtung passieren, und dieses Skript prüft nicht separat auf Elemente, die bereits auf der Seite sind. Sind Banner und Button schon da und wird danach nichts mehr zur Seite hinzugefügt, löst der Observer nie aus, und das Banner bleibt in seinem versteckten Startzustand. In einem schnellen Test auf einer einfachen statischen Seite ist genau das passiert. Wenn Ihr Banner also nie erscheint, prüfen Sie zuerst diesen Punkt.

Fertig! Schluss mit dauerhaften Bannern

Jetzt haben Sie in Webflow ein sitzungsbasiertes, schließbares Banner, das:

in jeder neuen Sitzung erscheint (also nicht dauerhaft ausgeblendet bleibt).
Nutzern erlaubt, es ohne Cookies zu schließen.
nur mit Attributen arbeitet und dadurch Webflow-freundlich ist.
mit Banner-Elementen zurechtkommt, die Webflow verspätet hinzufügt.

Probieren Sie es einfach aus! Melden Sie sich, falls Probleme auftreten.

Das Cloneable finden Sie hier. Weitere von uns finden Sie auf unserer Seite mit Webflow-Cloneables.

FAQ

Wie füge ich in Webflow ein schließbares Banner ohne Cookies hinzu?

Fügen Sie einen Div-Block mit dem Attribut banner-element="banner-component" und darin einen Button mit banner-element="close" hinzu. Fügen Sie dann das Skript direkt vor </body> in Ihren Custom-Code-Einstellungen ein. Klickt ein Besucher auf den Button, blendet das Skript das Banner aus und speichert ein Flag in sessionStorage, sodass keine Cookies im Spiel sind.

Kommt das Banner zurück, wenn der Besucher die Seite neu lädt?

Nein. sessionStorage übersteht Seitenneuladungen, ein geschlossenes Banner bleibt also ausgeblendet, bis der Tab oder der Browser geschlossen wird. MDN formuliert es so: „Eine Seitensitzung dauert so lange, wie der Tab oder der Browser geöffnet ist, und übersteht Neuladungen und Wiederherstellungen der Seite.“ Die vollständigen Details stehen in der MDN-Dokumentation zu sessionStorage.

Bleibt ein geschlossenes Banner in einem neuen Tab ausgeblendet?

Meistens erscheint das Banner wieder. Jeder Tab hat seine eigene Seitensitzung, und diese Sitzung ist nur in genau diesem Tab zugänglich. Wer Ihre Adresse eintippt oder aus den Suchergebnissen in einem neuen Tab kommt, sieht das Banner also noch einmal. Die eine Ausnahme ist ein Tab, der über einen Link auf Ihrer Website geöffnet wird. MDN schreibt: „Wenn eine Seite in einem neuen Tab oder Fenster geöffnet wird, entsteht eine neue Sitzung mit dem Wert des übergeordneten Browsing-Kontexts, was sich von der Funktionsweise von Sitzungs-Cookies unterscheidet.“ In diesem Fall startet der neue Tab mit einer Kopie der Sitzungsdaten des ursprünglichen Tabs, und das Banner bleibt ausgeblendet.

Wie halte ich das Banner dauerhaft ausgeblendet, nachdem es geschlossen wurde?

Ersetzen Sie im Skript sessionStorage durch localStorage. Beide haben dieselben Methoden, aber localStorage bleibt über Tabs und Besuche hinweg erhalten, während sessionStorage beim Schließen des Tabs gelöscht wird. So wird daraus ein Banner nach dem Motto „Nie wieder anzeigen“, was das Gegenteil dessen ist, was dieser Beitrag baut.