Comment ajouter une bannière d’information fermable, basée sur la session, dans Webflow (sans cookies)

Vous avez déjà eu besoin d’afficher dans Webflow une bannière d’information que les visiteurs peuvent fermer, mais qui réapparaît à leur prochaine visite ? Une annonce, une promo, ou un petit message du genre « attention, c’est important ». Seulement voilà : vous ne voulez pas jongler avec des cookies, et vous voulez une solution adaptée à Webflow.

C’est exactement ce que fait ce petit extrait de JavaScript. Il s’appuie sur sessionStorage pour rester simple : pas de cookies, pas de scripts lourds, juste une façon propre et efficace d’afficher une bannière à chaque session et de laisser les visiteurs la masquer pendant qu’ils naviguent. Nous avons dû le créer pour un client il y a quelque temps, et nous le partageons aujourd’hui. Voyons-le étape par étape. Vous y trouverez peut-être quelques redondances, mais elles étaient propres à ce projet et nous avions dû corriger certains soucis apparus en route, alors nous les avons gardées. Vous trouverez aussi un cloneable pratique tout en bas de l’article, avec le script en fonctionnement. N’hésitez pas à le personnaliser. Si vous vous interrogez plus largement sur les cookies et le consentement, nous avons aussi écrit sur ce qu’il advient de vos données analytiques quand la plupart des visiteurs refusent les cookies.

Ce que fait ce script

• Il affiche une bannière quand un visiteur démarre une nouvelle session (c’est-à-dire quand il ouvre votre site dans un nouvel onglet ou après avoir fermé son navigateur).
• Il permet de la fermer, et la garde masquée pendant la navigation.
• Il se réinitialise à chaque session : à la prochaine visite, la bannière s’affiche de nouveau.
• Il utilise uniquement des attributs pour une intégration facile dans Webflow (aucune classe nécessaire).
• Aucun cookie nécessaire : tout passe par sessionStorage.

Comment le mettre en place dans Webflow

1. Ajouter la bannière dans Webflow

Dans Webflow, ajoutez un simple div block pour votre bannière et un bouton pour la fermer. Mais au lieu d’utiliser des classes, nous allons utiliser 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 sont plus faciles à gérer dans Webflow, surtout avec du contenu dynamique. Pas de conflits de noms de classes à craindre. Très simple : nommez vos classes comme vous le souhaitez. (Si vous hésitez encore sur le système de nommage des classes, nous avons écrit un article pour savoir si Finsweet Client-First est fait pour vous.)

2. Coller ce script dans Webflow

Rendez-vous maintenant dans les paramètres de Custom Code 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> ? Cela garantit que tous les éléments sont chargés avant l’exécution du script, ce qui évite les erreurs où le script tente de sélectionner des éléments qui n’existent pas encore. Si vous souhaitez de l’aide pour écrire ou ajuster du code personnalisé de ce type, consultez notre article sur l’écriture de code personnalisé pour Webflow avec ChatGPT.

Comment ça fonctionne

Passons à la partie amusante : que se passe-t-il vraiment dans le script ?

Étape 1 : Trouver la bannière et le bouton de fermeture

Le script cherche deux choses :

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

Si l’un des deux est introuvable, le script s’arrête pour éviter les erreurs.

Étape 2 : Rendre la bannière visible

Webflow charge parfois des éléments masqués par défaut, nous nous assurons donc que la bannière est visible en définissant :

banner.style.visibility = 'visible';

(Je pense que le client pour lequel nous l’avons écrit à l’origine avait réglé l’élément de la bannière sur masqué.)

Étape 3 : Vérifier le stockage de session

L’ingrédient magique : sessionStorage.

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

Cela signifie :

• Si la bannière n’a pas été fermée pendant cette session → elle s’affiche.
• Si le visiteur l’a déjà fermée pendant cette session → elle reste masquée.
• Le script ne fait passer que l’opacité à 1 : dans le Designer, vous pouvez donc régler l’élément de la bannière sur une opacité de 0 % avec une transition d’opacité de 300 ms. Elle apparaît alors en fondu, et disparaît de la même façon à la fermeture.

Étape 4 : Gérer le clic sur le bouton de fermeture

Quand le visiteur clique sur le bouton de fermeture, nous :

• Faisons disparaître la bannière en fondu.
• Attendons 300 ms que la transition se termine.
• Masquons complètement la bannière (display: none;).
• Enregistrons dans sessionStorage qu’elle a été fermée.

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

Étape 5 : MutationObserver pour les éléments Webflow

Webflow charge parfois des éléments de façon dynamique : le script attend donc que la bannière et le bouton de fermeture existent avant de s’exécuter :

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

Cela aide le script à s’en sortir quand Webflow charge certains éléments un peu tard. Nous utilisons la même idée d’attente de l’élément dans notre article sur l’optimisation des vidéos de fond Vimeo avec un intersection observer.

(Si je me souviens bien, le client avait soit beaucoup de JavaScript, soit des vidéos en cours de chargement, ce qui retardait les choses : le script était prêt, mais pas la bannière.)

Une réserve honnête : un MutationObserver ne réagit qu’aux changements qui surviennent après le début de son observation, et ce script ne comporte aucune vérification séparée pour les éléments déjà présents sur la page. Si la bannière et le bouton sont déjà là et que rien d’autre n’est ajouté à la page ensuite, l’observateur ne se déclenche jamais et la bannière reste dans son état de départ masqué. Lors d’un test rapide sur une simple page statique, c’est exactement ce qui s’est produit. Si votre bannière ne s’affiche jamais, vérifiez donc ce point en premier.

C’est fait ! Fini les bannières persistantes

Vous disposez maintenant d’une bannière fermable basée sur la session dans Webflow qui :

• S’affiche à chaque nouvelle session (elle n’est pas masquée définitivement).
• Permet aux visiteurs de la masquer sans cookies.
• Utilise uniquement des attributs pour rester compatible avec Webflow.
• Gère les éléments de bannière que Webflow ajoute tardivement.

Allez-y, testez ! Dites-nous si vous rencontrez le moindre problème.

Vous trouverez le cloneable ici. D’autres de nos cloneables se trouvent sur notre page des cloneables Webflow.

FAQ

Comment ajouter une bannière fermable dans Webflow sans cookies ?

Ajoutez un div block avec l’attribut banner-element="banner-component" et, à l’intérieur, un bouton avec banner-element="close", puis collez le script juste avant </body> dans vos paramètres de Custom Code. Quand un visiteur clique sur le bouton, le script fait disparaître la bannière en fondu et enregistre un indicateur dans sessionStorage : aucun cookie n’est donc impliqué.

La bannière revient-elle si le visiteur actualise la page ?

Non. sessionStorage survit aux rechargements de page : une bannière fermée reste donc masquée jusqu’à la fermeture de l’onglet ou du navigateur. MDN l’explique ainsi : « Une session de page dure aussi longtemps que l’onglet ou le navigateur est ouvert, et elle survit aux rechargements et aux restaurations de la page. » Le détail complet se trouve dans la documentation MDN sur sessionStorage.

Une bannière fermée reste-t-elle masquée dans un nouvel onglet ?

En général, la bannière s’affiche de nouveau. Chaque onglet possède sa propre session de page, accessible uniquement dans cet onglet : un visiteur qui saisit votre adresse ou arrive depuis un résultat de recherche dans un nouvel onglet reverra donc la bannière. La seule exception est un onglet ouvert depuis un lien de votre site. MDN indique : « Ouvrir une page dans un nouvel onglet ou une nouvelle fenêtre crée une nouvelle session avec la valeur du contexte de navigation de premier niveau, ce qui diffère du fonctionnement des cookies de session. » Dans ce cas, le nouvel onglet démarre avec une copie des données de session de l’onglet d’origine, et la bannière reste donc masquée.

Comment garder la bannière masquée définitivement une fois fermée ?

Remplacez sessionStorage par localStorage dans le script. Ils partagent les mêmes méthodes, mais localStorage est conservé entre les onglets et les visites, alors que sessionStorage est effacé à la fermeture de l’onglet. Vous obtenez ainsi une bannière « ne plus afficher », ce qui est l’inverse de ce que construit cet article.