Welcome to the Rubberium Blog

How to add this to your website

Follow along step by step with the quick video tutorial: https://youtu.be/uSgSoEQD1vs

This modal is shown only once for a user using cookies.

Add this code to the </body> section in your project settings:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" ></script>

<script>
$(document).ready(function(){
if (!Cookies.get('alert')) { setTimeout(function(){
$('.popup-overlay').css('display','flex');
Cookies.set('alert', true, { expires: 1 });
}, 10000);
}
});
// Documentation at https://github.com/js-cookie/js-cookie
</script>

Change the 10000 (10 seconds) to however long you want the pop-up to wait until it appears.

Next, copy and paste the Pop-Up symbol into your Webflow project on any page.

Style the card however you want, adding in your own text and email form if needed.

Change the display of the Popup Overlay div to none in the Layout section of the div styling.

Finally, turn the Popup Overlay into a symbol, and add the symbol to any page you want the pop-up to appear.

You can then test your pop-up, rechecking in incognito to reset cookies.

___

Handy tool by Nikolai Bain