CRO / Conversion

1 views

5 min

How to Control a Banner’s Display and Dismissal Using the Browser’s Local Storage in Webflow

Introduction

Element	ID / Class	Role
Banner	id='banner'	Element to show/hide
Close button	class='close-btn'	Triggers closing and storage
localStorage key	bannerClosed	Stores the closed state

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to control when a banner appears and closes using the browser's local storage in Webflow.

‍

Controlling when a promotional banner appears and closes using the browser's local storage improves the user experience. This technique keeps the banner from showing up on every visit, reducing interruptions and distractions for the user.

Here's how to do it:

1. Add the "banner" ID to your banner

‍

2. Add the "close-btn" class to the element that closes your banner

‍

3. Hide your banner by default

Your banner should be set to Display: None by default

good to know

This avoids a weird behavior where the banner shows by default and then gets hidden once the page loads

‍

4. Add this code to the <body> of your page

‍

good to know

localStorage lasts forever. For temporary banners (for example, valid for 7 days), store an expiration date instead of a boolean: localStorage.setItem('bannerClosed', Date.now()), then check whether the date is less than 7 days old.

5. All that's left is to test it

‍

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss