Comment ajouter une bannière d'informations basée sur une session non admissible dans Webflow (sans cookies)

Avez-vous déjà eu besoin d'un moyen d'afficher une bannière d'information dans Webflow que les utilisateurs peuvent ignorer, puis la faire réapparaître lors de leur prochaine visite ? Peut-être pour une annonce, une promotion ou un message amical « Hé, c'est important ». Mais voici le hic : vous ne voulez pas vous embêter avec les cookies et vous voulez qu'il soit compatible avec Webflow.

C'est exactement ce que fait ce petit extrait de code JavaScript. Il utilise Stockage des sessions pour simplifier les choses : pas de cookies, pas de scripts surchargés, juste un moyen propre et efficace d'afficher une bannière par session et de permettre aux utilisateurs de la masquer pendant qu'ils naviguent. Nous avons dû le créer pour un client il y a quelque temps et maintenant nous le partageons. Décomposons-le étape par étape. Vous pourriez trouver une certaine redondance ici, mais c'était spécifique à ce projet et nous avons dû résoudre certains problèmes qui sont survenus, nous l'avons donc laissé de côté. Il existe également un clonable pratique tout en bas de l'article avec le script en cours d'exécution. N'hésitez pas à le personnaliser.

🚀 Ce que fait ce script

✅ Affiche une bannière lorsqu'un utilisateur démarre une nouvelle session (c'est-à-dire lorsqu'il ouvre votre site dans un nouvel onglet ou après avoir fermé le navigateur).
✅ Leur permet de le fermer et de le masquer pendant qu'ils naviguent.
✅ Réinitialise chaque session, de sorte que la bannière réapparaisse lors de leur prochaine visite.
✅ Utilisations uniquement les attributs pour une intégration facile à Webflow (pas besoin de cours).
✅ Aucun cookie n'est nécessaire—tout est géré avec Stockage des sessions.

🛠️ Comment le configurer dans Webflow

1. Ajouter la bannière dans Webflow

Dans Webflow, ajoutez un simple bloc div pour votre bannière et bouton pour le fermer. Mais au lieu d'utiliser des classes, nous utiliserons des attributs personnalisés.

👉 Structure :

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

📌 Pourquoi des attributs ? Ils facilitent la gestion dans Webflow, en particulier lorsque vous travaillez avec du contenu dynamique. Pas besoin de s'inquiéter des conflits de dénomination de classe. Super facile, nommez vos cours comme vous le souhaitez.

2. Collez ce script dans Webflow

Maintenant, allez à Paramètres du code personnalisé de Webflow et ajoutez ce script juste avant </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>

📌 Pourquoi le placer avant </body>? Il garantit que tous les éléments ont été chargés avant l'exécution du script, évitant ainsi les erreurs lorsque le script essaie de sélectionner des éléments qui n'existent pas encore.

🤔 Comment ça marche

Passons maintenant à la partie amusante...que se passe-t-il réellement dans le script ?

1 ️ Trouvez la bannière et le bouton de fermeture

Le script recherche deux choses :

• Le bannière ([banner-element="bannier-component "])
• Le bouton de fermeture ([banner-element="fermer "])

Si l'un des deux est absent, le script s'arrête de s'exécuter pour éviter les erreurs.

2 ️ Rendre la bannière visible

Webflow charge parfois des éléments masqués par défaut. Nous veillons donc à ce que la bannière soit visible en définissant :

banner.style.visibility = 'visible';

(Je pense que le client pour lequel nous avons écrit ceci à l'origine avait l'élément de bannière défini sur masqué)

3 ️ Vérifiez le stockage des sessions

L'ingrédient magique : Stockage des sessions.

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

Cela signifie que :

• Si la bannière n'a pas été fermé dans cette session → ça se voit.
• Si l'utilisateur l'a déjà fermé dans cette session → il reste masqué.
• Vous pouvez définir l'élément de bannière avec l'attribut sur une opacité de 10 %.

4 ️ Manipulez le bouton Fermer et cliquez

Lorsque l'utilisateur clique sur le bouton de fermeture, nous :

• Efface la bannière.
• Attendre 300 ms pour que la transition soit terminée.
• Masquez complètement la bannière (affichage : aucun ;).
• Entrepôt dans lequel ils l'ont fermé Stockage des sessions.

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

5 ️ MutationObserver pour Webflow Elements

Webflow charge parfois des éléments de manière dynamique, donc le script attend que Webflow ait tout rendu avant de courir :

const observer = new MutationObserver (mutations, obs) => {
si (
document.querySelector ('[banner-element="bannier-component "]') &&
document.querySelector ('[banner-element="fermer "]')
) {
InitializeBanner () ;
obs.disconnect () ;
}
}) ;

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

Cela garantit que le script n'échoue pas simplement parce que Webflow a chargé les éléments un peu tard.

(Si je me souviens bien, le client avait une tonne de Javascript ou des vidéos en cours de chargement et les choses ont été retardées, puis le script était prêt mais pas la bannière).

🎉 C'est fait ! Plus de bannières persistantes

Vous avez maintenant un bannière révocable basée sur la session dans Webflow qui :

• Se présente chaque nouvelle session (non masqué de façon permanente).
• Permet aux utilisateurs de le masquer sans cookies.
• Utilisations attributs uniquement pour Convivialité avec WebFlow.
• Fonctionne de manière dynamique avec Webflow chargement différé.

🔥 Allez-y, testez-le ! Faites-moi savoir si vous rencontrez des problèmes. 🚀

Vous pouvez trouver le clonable ici.