So fügen Sie ein unzulässiges sitzungsbasiertes Informationsbanner in Webflow ohne Cookies hinzu

February 18, 2025

· 3 min

Fügen Sie in WebFlow ganz einfach ein sitzungsbasiertes, ablehnendes Banner hinzu — keine Cookies, nur sauberes JavaScript.

Brauchten Sie schon einmal eine Möglichkeit, in Webflow ein Infobanner anzuzeigen, das Benutzer zwar abweisen können, es dann aber bei ihrem nächsten Besuch wieder erscheinen lassen? Vielleicht für eine Ankündigung, eine Werbeaktion oder eine freundliche „Hey, das ist wichtig“ -Botschaft. Aber hier ist der Haken: Sie wollen nicht mit Cookies herumspielen und Sie möchten, dass sie Webflow-freundlich sind.

Genau das macht dieser kleine JavaScript-Schnipsel. Es benutzt Sitzungsspeicher um die Dinge einfach zu halten — keine Cookies, keine aufgeblähten Skripte, nur eine saubere, effiziente Möglichkeit, ein Banner pro Sitzung anzuzeigen und es Benutzern zu ermöglichen, es beim Surfen auszublenden. Wir mussten das vor einiger Zeit für einen Kunden erstellen und jetzt teilen wir es. Lassen Sie uns das Schritt für Schritt aufschlüsseln. Vielleicht finden Sie hier eine gewisse Redundanz, aber sie war spezifisch für dieses Projekt und wir mussten einige aufgetretene Probleme beheben, also haben wir es dabei belassen. Ganz unten im Beitrag gibt es auch eine praktische Klonfunktion, in der das eigentliche Skript ausgeführt wird. Fühlen Sie sich frei, es anzupassen.

🚀 Was dieses Script macht

✅ Zeigt ein Banner an, wenn ein Benutzer eine neue Sitzung startet (also wenn er Ihre Website in einem neuen Tab öffnet oder nachdem er den Browser geschlossen hat).
✅ Ermöglicht es ihnen, es zu verwerfen und versteckt es, während sie surfen.
✅ Setzt jede Sitzung zurück — beim nächsten Besuch wird das Banner also wieder angezeigt.
✅ Verwendungen nur Attribute für eine einfache Webflow-Integration (keine Klassen erforderlich).
✅ Keine Cookies erforderlich—es ist alles erledigt mit Sitzungsspeicher.

🛠️ So richten Sie es in Webflow ein

1. Fügen Sie das Banner in Webflow hinzu

Fügen Sie in Webflow eine einfache div-block für dein Banner und ein Knopf um es zu schließen. Aber anstatt Klassen zu verwenden, verwenden wir benutzerdefinierte Attribute.

👉 Aufbau:

<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 erleichtern die Verwaltung in Webflow, insbesondere bei der Arbeit mit dynamischen Inhalten. Sie müssen sich keine Gedanken über Konflikte bei Klassennamen machen. Ganz einfach, benennen Sie Ihre Klassen so, wie Sie möchten.

2. Fügen Sie dieses Skript in Webflow ein

Gehen Sie jetzt zu Die benutzerdefinierten Code-Einstellungen von Webflow und füge dieses Script hinzu kurz davor </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>

📌 Warum es vorher platzieren </body>? Es stellt sicher, dass alle Elemente geladen wurden, bevor das Skript ausgeführt wird, und verhindert Fehler, bei denen das Skript versucht, Elemente auszuwählen, die noch nicht existieren.

🤔 So funktioniert es

Nun zum spaßigen Teil —was passiert eigentlich im Drehbuch?

1 ️ ♦ Finde das Banner und die Schaltfläche „Schließen“

Das Script sucht nach zwei Dingen:

Das Banner ([banner-element="Banner-Komponente "])
Das Schaltfläche „schließen“ ([banner-element="schließen "])

Fehlt eines der beiden, wird das Skript nicht mehr ausgeführt, um Fehler zu vermeiden.

2 ️ ♦ Machen Sie das Banner sichtbar

Webflow lädt manchmal Elemente, die standardmäßig versteckt sind. Daher stellen wir sicher, dass das Banner sichtbar ist, indem wir Folgendes einstellen:

banner.style.visibility = 'visible';

(Ich glaube, der Client, für den wir das ursprünglich geschrieben haben, hatte das Banner-Element auf versteckt gesetzt)

3 ️ ♦ Überprüfen Sie den Sitzungsspeicher

Die magische Zutat: Sitzungsspeicher.

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

Das bedeutet:

Wenn das Banner wurde nicht geschlossen in dieser Sitzung → es zeigt sich.
Wenn der Benutzer habe es schon geschlossen in dieser Sitzung → es bleibt versteckt.
Sie können das Bannerelement mit dem Attribut auf 10% Opazität setzen.

4 ️ ♦ Behandeln Sie den Klick auf die Schaltfläche „Schließen“

Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, gehen wir wie folgt vor:

Blende das Banner aus.
Warte 300 ms damit der Übergang abgeschlossen ist.
Blende das Banner vollständig aus (Anzeige: keine;).
Speicher, in dem sie es geschlossen haben Sitzungsspeicher.

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

5 ️ ♦ MutationObserver für Webflow-Elemente

Webflow lädt manchmal Elemente dynamisch, also das Skript wartet, bis Webflow alles gerendert hat vor dem Laufen:

const observer = neuer MutationObserver ((Mutationen, Obs) => { wenn ( document.querySelector ('[banner-element="Banner-Komponente "]') && document.querySelector ('[banner-element="schließen "]') ) { Banner initialisieren (); obs.disconnect (); } });

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

Dadurch wird sichergestellt, dass das Skript nicht fehlschlägt, nur weil Webflow die Dinge etwas spät geladen hat.

(Wenn ich mich richtig erinnere, hatte der Client entweder eine Menge Javascript oder Videos geladen und die Dinge verzögerten sich und dann war das Skript fertig, aber das Banner nicht).