How to Add a Dismissible Session Based Info Banner in Webflow Without Cookies

February 18, 2025

· 3 min

Easily add a session-based dismissible banner in Webflow—no cookies, just clean JavaScript.

Ever needed a way to show an info banner in Webflow that users can dismiss—but then have it reappear on their next visit? Maybe for an announcement, a promo, or some friendly "hey, this is important" messaging. But here’s the catch: you don’t want to mess around with cookies, and you want it to be Webflow-friendly.

That’s exactly what this little JavaScript snippet does. It uses sessionStorage to keep things simple—no cookies, no bloated scripts, just a clean, efficient way to show a banner per session and let users hide it while they browse. We had to create this for a client a while back and now we're sharing it. Let’s break it down step by step. You might find some redundancy here, but it was specific to that project and we had to fix some issues that came up so we left it in. There's also a handy cloneable at the very bottom of the post with the actual script running. Feel free to customise.

🚀 What This Script Does

✅ Shows a banner when a user starts a new session (aka, when they open your site in a new tab or after closing the browser).
✅ Lets them dismiss it, and keeps it hidden while they browse.
✅ Resets every session—so next time they visit, the banner shows up again.
✅ Uses only attributes for easy Webflow integration (no need for classes).
✅ No cookies needed—it’s all handled with sessionStorage.

🛠️ How to Set It Up in Webflow

1. Add the Banner in Webflow

Inside Webflow, add a simple div block for your banner and a button to close it. But instead of using classes, we’ll use custom attributes.

👉 Structure:

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

📌 Why attributes? They make it easier to manage in Webflow, especially when working with dynamic content. No need to worry about class naming conflicts. Super easy, name your classes the way you want.

2. Paste This Script in Webflow

Now, go to Webflow's Custom Code settings and add this script right before </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>

📌 Why place it before </body>? It ensures that all elements have loaded before the script runs, preventing errors where the script tries to select elements that don’t exist yet.

🤔 How It Works

Now for the fun part—what’s actually happening inside the script?

1️⃣ Find the Banner & Close Button

The script looks for two things:

The banner ([banner-element="banner-component"])
The close button ([banner-element="close"])

If either is missing, the script stops running to avoid errors.

2️⃣ Make the Banner Visible

Webflow sometimes loads elements hidden by default, so we ensure the banner is visible by setting:

banner.style.visibility = 'visible';

(I think the client we originally wrote this for had the banner element set to hidden)

3️⃣ Check Session Storage

The magic ingredient: sessionStorage.

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

This means:

If the banner hasn’t been closed in this session → it shows.
If the user closed it already in this session → it stays hidden.
You can set the banner element with the attribute on to 10% opacity.

4️⃣ Handle the Close Button Click

When the user clicks the close button, we:

Fade out the banner.
Wait 300ms for the transition to finish.
Fully hide the banner (display: none;).
Store that they closed it in sessionStorage.

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

5️⃣ MutationObserver for Webflow Elements

Webflow sometimes loads elements dynamically, so the script waits until Webflow has rendered everything before running:

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

This ensures the script doesn’t fail just because Webflow loaded things a bit late.

(If I remember correctly the client either had a ton of Javascript or videos loading and things got delayed and then the script was ready but the banner wasn't).