Hi there,
I’m trying to write a simple piece of script to enable the use of an exit intent on a site that would only show up if you haven’t closed it once before.
I’m pretty bad at js / jquery and am therefore having trouble adding two conditions instead of one to a script I wrote… and I don’t understand why
This version has syntax problems, but I don’t understand which :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// Check cookie
if (!$.cookie('exit-intent-closed')) {
// if no cookie, exit intent active
document.addEventListener("mouseleave", function(e){
if (e.clientY < 0)
{
$('#exit-popup').css("display", "flex");
$('#exit-popup').fadeIn();
}
}, false);
}
$('#exit-popup-cross').click(function () {
// cookie if exit intent closed
var date = new Date();
date.setTime(date.getTime() + 48 * 60 * 60 * 1000);
$.cookie('exit-intent-closed', true, { expires: date });
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
}, 5000);
});
</script>
This version has a problem with the combination of conditions (&&)
<script>
document.addEventListener("mouseleave", function(e){
if (e.clientY < 0) && (!$.cookie('exit-intent-closed'))
{
$('#exit-popup').css("display", "flex");
$('#exit-popup').fadeIn();
}
}, false);
$('#exit-popup-cross').click(function () {
// cookie if exit intent closed
var date = new Date();
date.setTime(date.getTime() + 48 * 60 * 60 * 1000);
$.cookie('exit-intent-closed', true, { expires: date });
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
}, 5000);
});
</script>
Thanks @vincent, I actually used your tutorial to write my script
My problem is I need two if conditions :
If cookie not present & if user mouse position has left the top of the site.
The combination of both is where I’m stuck…
Ok, so I found a better way of writing the script, and it works as it should. Therefore I’m sharing the result here if it can help someone
First add <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
and then
<script>
$(document).ready(function(){
// check for cookie
if ($.cookie('exit-intent-closed')) {
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
//console.log('Removed because cookie');
}, 2500);
}
// if no cookie, check for user leaving
else document.addEventListener("mouseleave", function(e){
if (e.clientY < 0)
{
$('#exit-popup').css("display", "flex");
$('#exit-popup').fadeIn();
//console.log('User leaving, show popup');
}
}, false);
// handle closing of exit intent
$('#exit-popup-cross').click(function () {
// cookie if exit intent closed
var date = new Date();
date.setTime(date.getTime() + 48 * 60 * 60 * 1000);
$.cookie('exit-intent-closed', true, { expires: date });
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
//console.log('Removed because click');
}, 2500);
});
});
</script>
For those who want to use that, you can remove all the comments (the lines starting with // ) and just rename the cookie and change the id of the popup wrapper with the name of your element. If your popup wrapper is in display block or inline or other, just change the .css(“display”,“XXX”) accordingly.
Some weird thing, it works like a charm on Chrome but doesn’t on Safari… and I have no idea why… It doesn’t even write the console logs in the console…
Seems like a JS / jQuery problem ? Apparently linked to the mouseleave event.
Ok, new solution that seems to work for Chrome, Safari, Firefox etc
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
// check for cookie
if ($.cookie('exit-intent-closed')) {
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
console.log('Removed because cookie');
}, 1500);
}
// if no cookie, check for user leaving
else $(document).on('mouseleave', leaveFromTop);
function leaveFromTop(e){
if ( e.clientY < 0 )
$('#exit-popup').css("display", "flex");
$('#exit-popup').fadeIn();
console.log('User leaving, show popup');
};
// handle closing of exit intent
$('#exit-popup-cross').click(function () {
// cookie if exit intent closed
var date = new Date();
date.setTime(date.getTime() + 48 * 60 * 60 * 1000);
$.cookie('exit-intent-closed', true, { expires: date });
// destroy exit intent
setTimeout(function(){
$('#exit-popup').remove();
console.log('Removed because click');
}, 1000);
});
});
</script>
Apparently for it to work correctly the browsers need the function that checks the position to be clearly called with an .on(‘mouseleave’, function) and not with a eventlistener of mouseleave. Don’t ask why, I have no idea
Hey @pepperclip . Came across this post as it was exactly what I’m after. I’ve implemented the code and it works… But, the popup shows whichever edge of the browser window the user leaves from, not just the top edge… But, more confusingly, it behaves differently when the user leaves from the top. That is, the popup is correctly set to display flex when leaving from the top, but when leaving from any other edge it is set to display block?
It’s really thrown me. I can understand there could be an error where is displays whichever edge you leave from, but I can’t see how it would have different display settings?? Any help hugely appreciated.
It’s client project so I can’t share a link at the moment, but the code is identical to yours, just changing the IDs
Would you happen to know how to add some animations to the popup so it looks better when it opens (like transform by scaling from 0 to 1 and translating across the Y axis)?
Hi ! Watch this video which will help you in adding the animation to your webflow popup.
We can make any type of popup in Webflow with the help of interactions. watch this video in which it is totally explained like Ho to create a webflow popup modal on button click in just simple 3 steps.
