Exit-Intent technology has been one of the most successful Internet marketing techniques. Websites use this technology to increase subscribers, sell products, social media followers etc. In this tutorial I will tell you what it is and how exactly it works. And also how to integrate this technology in your own website.
What is Exit-Intent Technology?
In nutshell Exit-Intent technology is displaying a modal before user leaves the site. This modal can be positioned anywhere and its purpose can be anything.
How does Exit-Intent finds if User is leaving the site?
Technically exit intent detects when mouse pointer moves out of browser viewport. As soon as the mouse pointer moves outside viewport a modal is displayed. This brings back user attention to the site. This is a very user friendly way of displaying a modal as the user was anyways leaving the site. It has been proved that this techniques brings back attention of 90% of your website users. And then you can ask the user to subscribe, follow you on social media or provide a coupon for your premium product.
How to detect when mouse pointer leaves viewport?
We can detect when mouse pointer leaves viewport by using JavaScript’s mouseleave event.
Here is example code on how to detect using mouseleave event
if( e.clientY < 0 )
{
alert("Hey don't leave. I have an free eBook for you");
}
}, false);
Ouibounce JavaScript Library
Ouibounce is a JavaScript library which lets you detect when mouse pointer leaves the viewport and also its comes with inbuilt ready to use modals.
Other features provided by Ouibounce are:
- Sometimes user’s while navigating the site move their mouse pointer outside viewport. Ouibounce is intelligent enough to detect this and prevent displaying modal./li>
- Ouibounce fires only once for each visitor.
- Its has an time limit before a modal is displayed. For example: A user will never leave a site before 2-5 seconds therefore it never displays a modal in this time gap.
Here is an example on how to use Ouibounce
<html>
<head>
<title>Exit Intent</title>
<!-- Load Ouibounce from CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/carlsednaoui/ouibounce/master/test/ouibounce.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
</head>
<body>
<!-- Ouibounce Modal -->
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>This is a Ouibounce modal</h3>
</div>
<div class="modal-body">
<p>Thanks for stoping by!</p>
<form>
<input type="text" placeholder="you@email.com">
<input type="submit" value="learn more »">
<p class="form-notice">*this is a fake form</p>
</form>
</div>
<div class="modal-footer">
<p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">no thanks</p>
</div>
</div>
</div>
<script>
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'),{
aggressive: true, //Making this true makes ouibounce not to obey "once per visitor" rule
});
</script>
</body>
</html>
If you are planning to create your own modal then no need to embed the Ouibounce’s CSS file. Just create a hidden modal i.e., display property set to none. And then select it and pass the reference to ouibounce function. When user is about to leave the site ouibounce changes the display property.
Here is example code how to do this
<html>
<head>
<title>Exit Intent</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
<style>
#ouibounce-modal
{
display: none;
}
</style>
</head>
<body>
<!-- Ouibounce Modal -->
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>This is a Ouibounce modal</h3>
</div>
<div class="modal-body">
<p>Thanks for stoping by!</p>
<form>
<input type="text" placeholder="you@email.com">
<input type="submit" value="learn more »">
<p class="form-notice">*this is a fake form</p>
</form>
</div>
<div class="modal-footer">
<p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">no thanks</p>
</div>
</div>
</div>
<script>
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'),{
aggressive: true, //Making this true makes ouibounce not to obey "once per visitor" rule
});
</script>
</body>
</html>
