The popup when exiting a site help

How to add custom code to show the popup when exiting a site?Thanks

$(document).on('click', 'a', function() {
  if(this.href.indexOf('http') == 0 && this.href.indexOf(location.hostname) == -1) {
    return confirm('Are you sure you want to leave this site?');
  }
});

Thanks @samliew

I want to create popup with form that can collect email, Like this one www.ogadget.com/x/jelly, when try to exit page, it show,

Can you show me an simple demo?

Thank you very much:laughing:

Hey @Anderson_Min
I’ve tried something a bit like what you are searching for. It might not be perfect but a first step towards a nice solution, easy to use with webflow :slight_smile: If anyone wants to chip in with improvement ideas :wink:

You need to create your modal / popup in webflow (popup background / popup div / popup closing element) with its closing interaction in webflow. You then display none your popup in webflow designer.
And then you can add a script similar to this one to your page’s custom code :

<script>
document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         $('#exit-popup').css("display", "flex");
         $('#exit-popup').fadeIn();
    }
}, false);

    $('#exit-popup-cross').click(function () { 
      setTimeout(function(){
        $('#exit-popup').remove();   
      }, 5000);
    });
</script>

It basically says if the mouse of user leaves the browser viewport in a vertical direction, you should display flex the popup and fade it in. Then you add a part that says when a user clicks the closing element, remove the popup from the DOM after a number of ms.

Hope this helps.

1 Like

Awesome solution! Was just wondering on how to make it work for mobile?

You can’t :slight_smile:
The idea of this exit intent popup is to figure out when the user is leaving… and the way to do that is to check for the user sending his cursor up to the adress bar. With mobile and touch, there is no mouse and therefore no way of understanding the exit intent.

Hello there !
it was working only on Chrome on my side.
This is a way to make it work on Safari, Firefox & Chrome.
It works a bit differently, the pop up shows if you’re trying to escape from any side of the window…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>


function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
// Trigger
addEvent(document, 'mouseout', function(evt) {

    if (evt.toElement == null && evt.relatedTarget == null ) {
        $('#exit-popup').slideDown();
    };

});

// Close the pop up
$('#exit-popup-cross').click(function(){
    $('#exit-popup').slideUp();
});

</script>

Hello @steffi,

Your code is amazing, thank you so much !

For those who want to use this code for display:flex, just add :
$(’#exit-popup’).css(“display”, “flex”);
after
$(’#exit-popup’).slideDown();

Thank you again for your amazing job there !
Laurent