How to Create an Exit Intent Popup

Exit intent popup is very widely used by websites because of lead generation (which is a part of Digital Marketing) and also for getting users in on website.  Using bootstrap modal we create an exit intent popup.

First thing what is exit popup?

Explanation: Exit intent popups basically appears on website or web pages when the user bounce back (or when user going to close that tab) from our website.

How to Create an Exit Intent Popup

Exit intent popup Script

Here we are creating Exit intent popup using bootstrap modal. Below are the Four Steps for How to Create an Exit Intent Popup,

  1. Including required scripts like, exitIntent JS, bootstrap css & js CDN.
  2. After Including, we create a bootstrap modal (responsive popup) which is appear at end.
  3. Using CSS, we design that modal.
  4. At end, For calling that modal we create a JS script. (Important Point)

Required Scripts

Below are the scripts of JQuery CDN, Bootstrap CSS CDN, JQuery ExitIntent JS, and Bootstrap JS CDN.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://tbz.alokitechnologies.com/js/jquery.exitintent.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

check this: JavaScript Array | Array length, push, pop, shift, unshift, IndexOf, forEach

Creating a Bootstrap Modal

Here we create a responsive popup using bootstrap modal. See below code,


<div id="warning">
<h3 class="text-center">After 2 second move your cursor above the page near the close tab.</h3>
<div class="modal fade" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="container register-form">
<div class="form">
<div class="note">
<p>Subscribe Our Newsletter</p>
</div>

<div class="form-content">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value=""/>
</div>
</div>
</div>
<button type="button" class="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap Modal Design using CSS

Here is the CSS code for design the background body and bootstrap modal. Check below code,


html{
width:100%;
height:100%;
}
body{
margin:0;
margin-top:20px;
font: 100 16px/1em 'Roboto Slab', serif;
color:#fff;background: #F1F2B5;
background: -webkit-linear-gradient(to left, #F1F2B5 , #135058);
background: linear-gradient(to left, #F1F2B5 , #135058);
}
.note
{
text-align: center;
height: 80px;
background: -webkit-linear-gradient(left, #0072ff, #8811c5);
color: #fff;
font-weight: bold;
line-height: 80px;
}
.form-content
{
padding: 5%;
border: 1px solid #ced4da;
margin-bottom: 2%;
}
.form-control{
border-radius:1.5rem;
}
.btnSubmit
{
border:none;
border-radius:1.5rem;
padding: 1%;
width: 20%;
cursor: pointer;
background: #0062cc;
color: #fff;
}

Creating an Exit Popup JS script

On this script, when a user going out from website then the Exit Popup appears. After one time the popup not coming till next refresh or next navigation. 


var n = 1;
$(function() {
$.exitIntent('enable');
$(document).bind('exitintent', function() {
if(n == 1){
$("#warning").slideDown();
$('.modal').modal({
show: true
});
n++;
}
n++;
});
});

From that link download complete Exit Intent Popup Script: Click Here

LIVE VIEW OF Exit Intent Popup

Check Also:

Best PHP IDE and Code Editor in 2019

Happy Coding..!

Was this article helpful?
YesNo
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 163

One thought on “How to Create an Exit Intent Popup

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort -

takip7.com

We are now accepting Guest Posting and creation of Backlinks
This is default text for notification bar