How to create a Bootstrap exit popup and time delay popup

Over the last few weeks I have been asked by two clients, who each sell the same product but in a different country, to build a popup as a tool to improve conversion on their website. I have built two different types of popups, for two different purposes.

An exit popup, prompting the visitor to order a free splashback sample before leaving.
A time-delay popup, prompting the visitor to view the product showcase YouTube video and order a free sample splashback

This post is intended as a bootstrap popup tutorial. Let’s step through the process for making each popup.

Exit Popup

The exit popup is the first popup I created, to offer a free kitchen splashback sample when the visitor is leaving. Reflection Splashback provides DIY kitchen splashbacks to New Zealanders. I was a little bit hesitant to create an exit popup because it can be annoying for visitors, a bit too cheeky! In the case of Reflections Splashback, the popup offers a free sample of their product which I believe is valuable enough to show them in an exit popup. The one hour cool down makes the popup appear infrequently. Hopefully the visitors love it!

Requirements:

    Show when visitor is about to exit the website
    Clicks and views of the popup need to be tracked with Google Analytics
    The popup should only show once per hour to each visitor
    The call to action needs to be compelling and attention grabbing.


To help the popup grab attention, I had a cute monster designed by a designer on Fiverr, a gig platform.

I used Bootstrap, a HTML, CSS and Javascript framework that I often use to when building new websites. The Reflections NZ website is built with Bootstrap, so it using Bootstrap for the popup is suitable. However, the Reflections Australia website (time-delay popup) is not built on Bootstrap and I still wanted to use it for making the popup. If you want to use only the relevant javascript and css from bootstrap, view this stackoverflow question which helped me to do so.

Create a Bootstrap modal box, and include it in the HTML of the pages that you want to show on, just before the closing body tag, </body>.

Here is my modal. I removed the modal header and modal footer because I don’t need I don’t need it for my modal.

<div class="modal fade" id="exitModal" tabindex="-1" role="dialog" aria-labelledby="exitModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h1 class="modal-title">Don't leave yet!</h1>
<img class="monster-modal img-responsive" src="https://www.reflectionsplashback.co.nz/wp-content/themes/reflections/images/monster-modal.svg">
<p>We want to give YOU a free Reflections Splashback sample pack to help you select a colour.</p>
<a href="/product/order-free-splashback-sample/" class="btn btn-block btn-success" onclick="ga('send', 'event', 'exitModal', 'Sample Button Clicked', 'exitModal');">Order a Free Colour Sample!</a>
</div>
</div>
</div>
</div>


Let’s add some styling. This can be included in your CSS file.

.modal-content {
background-color: purple !important;
color: #fff;
text-align: center;
}

.modal .btn {
display: block;
margin: 15px auto 0 auto;
}
.modal-title{
font-weight: 700;
}
.monster-modal{
width: 35%;
margin: 0 auto;
}
.modal-content p{
font-size: 1.2em;
}
.modal-content .btn{
font-size: 1.5em;
font-weight: 700;
}


Now we need to activate the modal when the visitor is about to leave the page.


// Start the DOM ready
jQuery( document ).ready( function( $ ) {
// Detect if their mouse moves outside the HTML element. For example, they move it up to the taskbar
$("html").mouseleave(function() {
// Show Modal
$('#exitModal').modal('show');
});
});


The popup will show every time the visitor hovers their mouse outside of the website view, for example, up by the taskbar. The popup will likely become very annoying, especially for admins of the website who regularly visit the website. We can solve this problem by saving a cookie when the popup displays, and then only showing it if the visitor does not have that cookie saved.
Create a javascript file such as exitpopup.js and include it in the footer of the pages that you want the popup to show.

I based the code for getting and setting cookies from the w3 schools javascript cookies guide.

The Javascript

Setting the Cookie


// set the cookie for 1 hour
function setCookie(cname, cvalue, exhours) {
var d = new Date();
// add cookie expiry date to be one hour from the current time
d.setTime(d.getTime() + (exhours * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
// Pass the name, cookie value and expiry time into the cookie
document.cookie = cname + "=" + cvalue + "; " + expires;
}

Get the cookie

This function will get the cookie, and we will use it when checking whether the cookie exists or not in the checkCookie function.

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca;
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}


Check the Cookie

Before displaying the exit popup, we need to check if they have already seen it in the last hour.

function checkCookie() {
var popUp = getCookie("poppedUp");
// if the cookie isn't empty, then don't show the modal, otherwise show the modal
if (popUp != "") {} else {
// show modal
$('#exitModal').modal('show');
// Send event to Google Analytics
ga('send', 'event', 'exitModal', 'Modal Displayed', 'exitModal');
// change the value of the cookie so that we know the visitor has seent the cookie
var popUp = 1;
setCookie("poppedUp", popUp, 1);
}
}

Now we can piece it all together!


//Start the DOM ready
jQuery(document).ready(function($) {
// Make sure that the modal isn't already showing
$('#exitModal').modal({
show: false
})

// set the cookie for 1 hour
function setCookie(cname, cvalue, exhours) {
var d = new Date();
// add cookie expiry date to be one hour from the current time
d.setTime(d.getTime() + (exhours * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
// Pass the name, cookie value and expiry time into the cookie
document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca;
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

function checkCookie() {
var popUp = getCookie("poppedUp");
// if the cookie isn't empty, then don't show the modal, otherwise show the modal
if (popUp != "") {} else {
// show modal
$('#exitModal').modal('show');
// Send event to Google Analytics
ga('send', 'event', 'exitModal', 'Modal Displayed', 'exitModal');
// change the value of the cookie so that we know the visitor has seent the cookie
var popUp = 1;
setCookie("poppedUp", popUp, 1);
}
}


$("html").mouseleave(function() {
checkCookie();
});
});

Time Delay Bootstrap Popup

The second popup I made is a time delay popup. After a set time, the popup appears. I made the popup to display a youtube video on the website of the Reflection Splashbacks Australia website.

Requirements

    Show popup after 15 seconds
    Embedded You Tube video
    Video stops when the modal closes

The HTML


<div class="modal fade " id="video-popup" tabindex="-1" role="dialog" aria-labelledby="video-popup-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h1 id="video-popup-label">View our Video</h1>
<div class="youtubeVideo">
<iframe id="youtubeVideo" width="100%" src="https://www.youtube.com/embed/3VLhKRoH2-c" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Without Google analytics event attached -->
<a class="btn btn-lg btn-success btn-modal" href="#">Order Splashback Sample</a>
<!-- With Google analytics event attached
<a class="btn btn-lg btn-success btn-modal" href="#" onclick="ga('send', 'event', 'exitModal', 'Sample Button Clicked', 'exitModal');">Order Splashback Sample</a>
-->
</div>
</div>
</div>
</div>

CSS Styling


.modal-content {
background-color: #39a9c5!important
}

.btn-modal {
display: block!important;
text-decoration: none
}

#video-popup-label {
text-align: center;
color: #fff
}

.modal {
font-family: Arial, Helvetica, sans-serif!important
}

.modal p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
color: #000!important
}



To make the video embed responsive and fill the area


.youtubeVideo {
position: relative;
padding - bottom: 56.25 %;
margin: 10 px 0;
height: 0;
overflow: hidden
}

.youtubeVideo embed,
.youtubeVideo iframe,
.youtubeVideo object {
position: absolute;
top: 0;
left: 0;
width: 100 %;
height: 100 %
}

The javascript!

The javascript for the youtube time delay popup has two parts: the cookies and snippet to turn off the Youtube video when the popup closes. The only differences in the cookies section is

jQuery(document).ready(function($) {
$('#video-popup').modal({
show: false
})

function setCookie(cname, cvalue, exhours) {
var d = new Date();
d.setTime(d.getTime() + (exhours * 60 * 60 * 1000 * 24));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca;
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

var popUp = getCookie("poppedUp");
if (popUp != "") {} else {
var show = function() {
$('#video-popup').modal('show');
var popUp = 1;
setCookie("poppedUp", popUp, 1);
}
$(window).load(function() {
var timer = window.setTimeout(show, 15000);
});

}
/* Get iframe src attribute value i.e. YouTube video url and store it in a variable */
var url = $("#youtubeVideo").attr('src');

/* Assign empty url value to the iframe src attribute when modal hide, which stop the video playing */
$("#video-popup").on('hide.bs.modal', function() {
$("#youtubeVideo").attr('src', '');
});

/* Assign the initially stored url back to the iframe src attribute when modal is displayed again */
$("#video-popup").on('show.bs.modal', function() {
$("#youtubeVideo").attr('src', url);
});
});


Now you will be able to make both an exit popup and a time delay popup with bootstrap.