CRO / Conversion

1 views

5 min

How to control a Webflow banner with local storage ?

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

‍

How to control a Webflow banner with local storage ?

Introduction

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

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

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials