I was building a site in Webflow for a client and they needed a popup window that appeared after 90 seconds on the site. 

Great for conversions, your users have been there for a minute and a half, they should be interested in your site. Lets do it. 

But there was a problem. 

Whilst you can delay a popup using Webflow’s native interactions, this is only going to to work on one page, and there is no way to measure this natively within webflow.

Custom Code to the rescue

So I found this great tutorial  by Vincent Bidaux to show a popup once every 24 hours. Pretty nifty little code. But it has some problems for our implementation.

But got me pointed in the right direction. 

Following his instructions, create your modal popup in webflow (don’t forget to add a close button using interactions), and give it a class of “popup-overlay”. Once you have it how you like, simply give it the display:none attribute within webflow. 

Display set to none, and popup-overlay as a selector


The custom code

Add the code below to your Webflow custom code area before the </body> tag.

The code checks every 5 seconds, and will show the popup once after it goes past 90 seconds on the site.  The cookies it sets expire after 30 days so your users will see the modal again after a month or so, assuming they are using the same browser.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
  window.interval = 90 * 1000; // milliseconds.
  window.poll_interval = 5 * 1000; // milliseconds again
  var now = Date.now(); 

  function checkPopup() {
	var now = Date.now(); 
    console.log((90 - ((now - $.cookie('alert-timer')) / 1000 )) + "s till popup" );
 	if(!$.cookie('alerted')) {
	  	if ((now - $.cookie('alert-timer')) >= window.interval) {
	    	$('.popup-overlay').show();
	    	$.cookie('alerted', true, { expires: 30});
          	console.log("I popped up mom");
	    	clearInterval(window.poller);
	  	}
	  }
  }

  if (!$.cookie('alert-timer')) {
    $.cookie('alert-timer', now, { expires: 30 });
  }
  
  // Check every 3 seconds
  window.poller = setInterval(checkPopup, poll_interval);
});
</script>

Changing how it works.

Console code (for testing)

I added some silly code that  prints to the console that you know it’s working.  Feel free to delete these two lines once you have it tested and working in a production environment

console.log((90 – ((now – $.cookie(‘alert-timer’)) / 1000 )) + “s till popup” );

and

console.log(“I popped up mom”);

Popup time 

My client wanted the popup to appear 90 seconds into a visit.  But you can change that to any number on this line. Just replace the 90 with your number of seconds.

window.interval = 90 * 1000; // milliseconds.

Polling interval

We also only want to check every 5 seconds. Which is much nicer than every second and gives a very similar result. If you have a shorter timeframe then lowering this might make sense. Change the 5 on this line with your poll interval.

window.poll_interval = 5 * 1000; // milliseconds again

Cookie Expiration

The default implementation has a 30 day expiry on cookies, which  means a user will see your popup again after 30 days. 

If you want to change this, simply edit these two lines. and change the 30 to however many days is desired.

$.cookie(‘alerted’, true, { expires: 30});

and

$.cookie(‘alert-timer’, now, { expires: 30 });