A while ago I was asked if I could create a last minute conversion popup, or as I like to call them Exit Overlays. The idea was to catch users before they decided to leave the website and offer them some type of promotion to entice them, whether that was a discount, or newsletter sign-up, something to get the users attention and help conversion rates. We also didn’t want this popup to show more than one time while the user was visiting the website to avoid being annoying. As always I said yes we can do that!
So to start, let’s break down the task:
So lets start with number one: How do we determine when a user is trying to leave a website? The easiest way is to track the cursor in the browser window. We will use jQuery to tackle this.
var client_cords = $(window).mouseover(function(e){
var cordsY = e.clientY;
if(cordsY < 10){
//Some code here
}
});
Lets take a minute to see whats going on here. Above we declare a variable called client_cords and we set it equal to the window object. We also call a function mouseover on that jQuery object, and pass it an anonymous function (a callback). This anonymous function takes one argument e and we use that argument to capture the Y value of the users mouse cursor. We set that value to the variable cordsY. Finally we test the value we set for cordsY to see if it is less than 10, this number represents pixels. So if the users mouse cursor is less than 10 pixels from the top of the viewport we will execute some code, otherwise nothing happens. Alright task one done, let’s move onto the next one.
Task number two: We need something to show the user (a popup) before they leave. Here we will use HTML for our structure and some CSS to make it look nice. I’ll be using bootstrap to speed this process up.
<div class="exit-overlay">
<div class="container">
<div class="col-md-6 col-md-offset-3 offer-block">
//Some really awesome offer to increase conversions!
</div>
</div>
</div>
Above is just some HTML with some bootstrap classes and some extra classes I added. I like to add my own classes so when I’m writting my CSS I’m not targeting bootstrap classes. This can help out in the future if you need to change the column size but want all other styles to stay the same. Lets give this a little style now.
.exit-overlay{
display: none;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 80px 0;
.offer-block{
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
}
The CSS code above may look a little strange to you if you have never used SASS, so I’ll explain it a little here. We first target the outer most element .exit-overlay and set some properties on it. We set the display of this element to none because we don’t want to see it, not yet at least, and we give it some other styles like a background color and padding. We also set the position property and top, right, bottom, and left properties. Next we nest the .offer-block element inside the .exit-overlay element. This is some functionality given to use by using SASS over standard CSS, and when it gets complied it would be like we called .exit-overlay .offer-block. We also set some properties of the .offer-block like background color, padding, and text-alignment just to make it standout. Ok now we have something to show lets update our JavaScript from above.
...
if(cordsY < 10){
$('.exit-overlay').show();
}
...
Alright that was pretty easy. Now if our users cursor is closer than 10 pixels from the window viewport we will show the HTML we wrote above. If you recall we set the element .exit-overlay‘s property of display to none, but here our jQuery is going to override that only if the condition matches. We are almost done here, just two more tasks to tackle.
The third task: Only show this overlay once per user session. Here I want to introduce session storage in the browser. We will take advantage of our users browser and store some data that we can retrieve while they are active in the current session. Let’s update our JavaScript.
if(!sessionStorage.exit_count){
sessionStorage.set_item('exit_count', 0);
}
...
if(cordsY < 10){
if(sessionStorage.exit_count < 1){
sessionStorage.set_item('exit_count', 1);
$('.exit-overlay').show();
}
}
...
Above we first test if there is an item in sessionStorage called exit_count and if not we set it. Then we add a conditional statement to our original JavaScript nested within the first conditional. The flow is: test the coordinates to see if we are 10 pixels or closer to the top of the viewport, then test our sessionStorage item. If the exit_count is less than 1 then execute the code block. The code block will set the sessionStorage item to 1 and then show our .exit-overlay HTML. The next time the user refreshes the page and moves the cursor to the top of the viewport you will not see the popup again! Ok down to the last step.
The final task: Prevent false positives. Here we are going to just use a setTimeout to give our users time to move the cursor from the address bar into the window viewport without triggering our Exit Overlay. Lets update our JavaScript to reflect that and while we are at it lets wrap our code in a function so we can call it later!
if(!sessionStorage.exit_count){
sessionStorage.set_item('exit_count', 0);
}
function exit_overlay(){
setTimeout(function(){
var client_cords = $(window).mouseover(function(e){
var cordsY = e.clientY;
if(cordsY < 10){
if(sessionStorage.exit_count < 1){
sessionStorage.set_item('exit_count', 1);
$('.exit-overlay').show();
}
}
});
}, 5000);
}
$(document).ready(function(){
exit_overlay();
});
We have now wrapped our code in a function that we can call at a later time, in our case on document.ready, and we have also wrapped it in a setTimeout function that will delay our code from running 5 seconds to help prevent false positives when a user first lands on the website.
There you have it! A simple exit overlay that you can use to help your clients conversion rates. You can even modify the code above to make an entry overlay, so when users first land they see the overlay and after the take action they won’t be bothered by it again during that session. A nice feature to add would be a close click function to help users that don’t want to take action exit out and continue exploring the website.
