javascript Eargo Popups

Posted 2021-05-03

jQuery(document).ready(function(){
	// Delayed popup
	var TimedPopupButton = $('.submit-button:contains(Timed Popup)');	
	TimedPopupButton.hide();
	setTimeout(function () {
	        TimedPopupButton.trigger( "click" );
	  }, 6000);
	  
	  
	  
	  
	// Popup show on scroll-up mobile 
	
// Select and Hide the Button
	var ScrollUpPopup = $('.submit-button:contains(On Scroll)');	
	ScrollUpPopup.hide();

	var ww = window.innerWidth;
	if (ww < 620) {
		
		
		var percentScrollLimit = 20; // when user scroll up more than 20 percent, the popup should appear
	    var scrollInterval = 200; // only check scroll position once in every 200 milisenconds
	
	    var scrollStart = window.scrollY;
	    var pageHeight = $(document).outerHeight();
	
	    var showedPopup = false;
	
		// Check every 200 milisenconds the scroll position. 
		// If user is scrolling down --> if (scrollAmount < 0) --> means that the user is still reading the page.
		// Else, the user is scrolling up. Check if the scrolled amount exceeds 20 percent of the page. If yes, the user probably scrolled to leave the page --> show popup
		setInterval(function() {
			if (showedPopup) {
				return;
			} else {
	            var scrollAmount = scrollStart - window.scrollY;
	            if (scrollAmount < 0) {
	                scrollAmount = 0;
	                scrollStart = window.scrollY;
	            }
	            else{
		            var upScrollPercent = scrollAmount / pageHeight;
		            if (upScrollPercent > percentScrollLimit / 100) {
		            	ScrollUpPopup.trigger( "click" );
	                    showedPopup = true;
	                	}
		            }
			}
		}, scrollInterval);
	}
})