Skip to content

Instantly share code, notes, and snippets.

@jhanstra

jhanstra/velour-exit-intent.html

Last active April 14, 2017 18:02
Show Gist options
  • Save jhanstra/b4c8ac8b125bb9b0692e525d21182170 to your computer and use it in GitHub Desktop.
Save jhanstra/b4c8ac8b125bb9b0692e525d21182170 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
velour-exit-intent.html
<!--
This file contains the HTML, scripts, and styles for an unobtrusive exit-intent newsletter pop-up for Velour Lashes.
Instructions:
1. Place the contents of this file on the page(s) you'd like the pop-up to show on. If there is a base theme file for the store, it will likely go there. Place at the bottom of the page inside the <body> tag.
2. Test thoroughly. I tried to make this work for any environment, but there may be issues I couldn't test for. I worked with Helvetica rather than Proxima Nova, so some of the styles may need to be adjusted.
3. Before publishing, remove the 'aggressive: true' line from the desktop trigger on line 263. This will allow the cookie to set on desktop.
-->
<div class="exit-intent position-foreground" style="display:none;">
<div class="overlay"></div>
<div class="banner">
<div class="exit-intent-banner medium--hide!">
<h1>Ready to make your<br/>lash application easier?</h1>
<button class="purple proceed">Yes, please!</button>
<div class="exit exit-icon">&#215;</div>
</div>
</div>
<div class="popup" style="display:none">
<div class="step one">
<div class="layer">
<div class="text-container">
<div class="hello-beautiful">
<p>Hello Beautiful,</p>
</div>
<div class="title">
<h1>Ready to make<br />your lash<br/>application<br/>easier?</h1>
</div>
<hr />
<div class="description">
<p>Redeem a FREE lash applicator now.</p>
</div>
<div>
<button class="purple proceed">Yes, please!</button>
<p class="exit">Not for me, thank you!</p>
</div>
</div>
<div class="desktop-image-container medium-down--hide!">
<img src="desktop1.png" />
</div>
</div>
</div>
<div class="step two" style="display:none">
<div class="layer">
<div class="mobile-image-container medium--hide!">
<img src="mobile2.png" />
</div>
<div class="text-container">
<div class="title">
<h1>We are so<br/>excited for you!</h1>
</div>
<hr />
<div class="description">
<p>Let us know where to send your free gift code and use the code at checkout.</p>
</div>
<form id="popup_signup" class="klaviyo_standard_embed_JYAS9B" action="https://manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="https://manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
<input type="hidden" name="g" value="JYAS9B">
<div class="klaviyo_field_group">
<input type="email" value="" name="email" id="k_id_email" placeholder="Enter your email here" />
</div>
<div class="klaviyo_messages">
<div class="success_message" style="display:none;"></div>
<div class="error_message" style="display:none;">
<p>Please fill in your email address.</p>
</div>
</div>
<div class="klaviyo_form_actions">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div class="desktop-image-container medium-down--hide!">
<img src="desktop2.png" />
</div>
</div>
</div>
<div class="step three" style="display:none">
<div class="layer">
<div class="mobile-image-container medium--hide!">
<img src="mobile3.png" />
</div>
<div class="text-container">
<div class="title">
<h1>Your code<br/>is on its way!</h1>
</div>
<hr />
<div class="description">
<p>Look for an email from socialize@velourlashes.com in your inbox. If you don't see it soon, please check your spam, just in case.</p>
</div>
<button class="exit">Back to home</button>
</div>
<div class="desktop-image-container medium-down--hide!">
<img src="desktop3.png" />
</div>
<div class="exit exit-icon white">&#215;</div>
</div>
</div>
<div class="exit exit-icon">&#215;</div>
</div>
</div>
<script>
(function() {
/* DEPENDENCIES */
/* Ouibounce */
!function(e,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):e.ouibounce=n()}(this,function(e,n,o){return function(e,n){"use strict";function o(e,n){return"undefined"==typeof e?n:e}function i(e){var n=24*e*60*60*1e3,o=new Date;return o.setTime(o.getTime()+n),"; expires="+o.toUTCString()}function t(){s()||(L.addEventListener("mouseleave",u),L.addEventListener("mouseenter",r),L.addEventListener("keydown",c))}function u(e){e.clientY>k||(D=setTimeout(m,y))}function r(){D&&(clearTimeout(D),D=null)}function c(e){g||e.metaKey&&76===e.keyCode&&(g=!0,D=setTimeout(m,y))}function d(e,n){return a()[e]===n}function a(){for(var e=document.cookie.split("; "),n={},o=e.length-1;o>=0;o--){var i=e[o].split("=");n[i[0]]=i[1]}return n}function s(){return d(T,"true")&&!v}function m(){s()||(e&&(e.style.display="block"),E(),f())}function f(e){var n=e||{};"undefined"!=typeof n.cookieExpire&&(b=i(n.cookieExpire)),n.sitewide===!0&&(w=";path=/"),"undefined"!=typeof n.cookieDomain&&(x=";domain="+n.cookieDomain),"undefined"!=typeof n.cookieName&&(T=n.cookieName),document.cookie=T+"=true"+b+x+w,L.removeEventListener("mouseleave",u),L.removeEventListener("mouseenter",r),L.removeEventListener("keydown",c)}var l=n||{},v=l.aggressive||!1,k=o(l.sensitivity,20),p=o(l.timer,1e3),y=o(l.delay,0),E=l.callback||function(){},b=i(l.cookieExpire)||"",x=l.cookieDomain?";domain="+l.cookieDomain:"",T=l.cookieName?l.cookieName:"viewedOuibounceModal",w=l.sitewide===!0?";path=/":"",D=null,L=document.documentElement;setTimeout(t,p);var g=!1;return{fire:m,disable:f,isDisabled:s}}});
/* End Ouibounce */
/* JS Cookie - */
!function(e){var n=!1;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var o=window.Cookies,t=window.Cookies=e();t.noConflict=function(){return window.Cookies=o,t}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}function n(o){function t(n,r,i){var c;if("undefined"!=typeof document){if(arguments.length>1){if(i=e({path:"/"},t.defaults,i),"number"==typeof i.expires){var a=new Date;a.setMilliseconds(a.getMilliseconds()+864e5*i.expires),i.expires=a}try{c=JSON.stringify(r),/^[\{\[]/.test(c)&&(r=c)}catch(e){}return r=o.write?o.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)),n=n.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),n=n.replace(/[\(\)]/g,escape),document.cookie=[n,"=",r,i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}n||(c={});for(var p=document.cookie?document.cookie.split("; "):[],s=/(%[0-9A-Z]{2})+/g,d=0;d<p.length;d++){var f=p[d].split("="),u=f.slice(1).join("=");'"'===u.charAt(0)&&(u=u.slice(1,-1));try{var l=f[0].replace(s,decodeURIComponent);if(u=o.read?o.read(u,l):o(u,l)||u.replace(s,decodeURIComponent),this.json)try{u=JSON.parse(u)}catch(e){}if(n===l){c=u;break}n||(c[l]=u)}catch(e){}}return c}}return t.set=t,t.get=function(e){return t.call(t,e)},t.getJSON=function(){return t.apply({json:!0},[].slice.call(arguments))},t.defaults={},t.remove=function(n,o){t(n,"",e(o,{expires:-1}))},t.withConverter=n,t}return n(function(){})});
/* End JS Cookie */
/* END DEPENDENCIES */
if (typeof(ga) !== 'undefined') {
/* Track customers who haven't seen the pop-up and are starting a new session */
if (!Cookies.get('viewedOuibounceModal') && !Cookies.get('exitIntentSession')) {
ga('send', 'event', 'Exit-Intent Popup', 'New customer');
Cookies.set('exitIntentSession', true);
}
/* If this is true, the user has seen the pop-up and continued their session */
if (Cookies.get('viewedOuibounceModal') && Cookies.get('exitIntentSession') && !Cookies.get('continuedInterest')) {
ga('send', 'event', 'Exit-Intent Popup', 'Continued interest after exit');
}
}
startPageOpenTimer();
var container = document.getElementsByClassName('exit-intent')[0],
overlay = document.getElementsByClassName('overlay')[0],
banner = document.getElementsByClassName('exit-intent-banner')[0];
popup = document.querySelectorAll('.exit-intent .popup')[0],
closePopupEls = document.querySelectorAll('.exit-intent .overlay:not(.popup), .exit-intent .exit, .exit-intent-banner .exit'),
proceedEls = document.querySelectorAll('.proceed'),
steps = document.querySelectorAll('.exit-intent .step'),
pageOpenTimer = 0,
engagementTimer = 0;
function triggerDesktopPopup() {
document.body.classList.add('popup-open');
container.style.display = 'block';
overlay.classList.add('activated');
popup.style.display = 'block';
engageUser();
}
// To test on mobile, substitute 'true' for the Cookies expression and remove the cookie-setting line.
function triggerMobileBanner() {
if (!Cookies.get('viewedOuibounceModal')) {
container.style.display = 'block';
overlay.classList.add('activated');
banner.style.display = 'block';
engageUser();
Cookies.set('viewedOuibounceModal', true, { expires: 5000 });
}
}
function engageUser() {
startEngagementTimer();
for (i=0; i<proceedEls.length; i++) {
proceedEls[i].addEventListener('click', proceed);
};
for (i=0; i<closePopupEls.length; i++) {
closePopupEls[i].addEventListener('click', closePopup);
};
if (pageOpenTimer < 3000) { gaLabel = 'Less than 30 seconds'; }
else if (3001 < pageOpenTimer && pageOpenTimer < 6000) { gaLabel = '30-60 seconds'; }
else if (6001 < pageOpenTimer && pageOpenTimer < 12000) { gaLabel = '1-2 minutes'; }
else { gaLabel = 'More than 2 minutes'; }
if (typeof(ga) !== 'undefined') {
ga('send', 'event', 'Exit-Intent Popup', 'Viewed popup', gaLabel);
ga('send', 'event', 'Exit-Intent Popup', 'Popup triggered on', window.location.pathname)
}
}
function proceed() {
container.style.display = 'block';
if (steps[0].style.display != 'none' || banner.style.display != 'none') {
steps[0].style.display = 'none';
if (banner) { banner.style.display = 'none'; popup.style.display = 'block';}
steps[1].style.display = 'block';
} else {
steps[1].style.display = 'none';
steps[2].style.display = 'block';
}
}
function startPageOpenTimer() {
setInterval(function() {
pageOpenTimer++;
}, 10);
}
function startEngagementTimer() {
setInterval(function() {
engagementTimer++;
}, 10);
}
function closePopup() {
document.body.classList.remove('popup-open');
container.style.display = 'none';
container.classList.add('closing');
overlay.classList.remove('activated');
banner.style.display = 'none';
var gaAction = '', gaLabel = '';
if (steps[0].style.display != 'none') { gaAction = 'Exited on screen 1'; }
else if (steps[1].style.display != 'none') { gaAction = 'Exited on screen 2'; }
else { gaAction = 'Submitted email / Exited on screen 3'; }
if (engagementTimer < 100) { gaLabel = 'Less than 1 second'; }
else if (101 < engagementTimer && engagementTimer < 300) { gaLabel = '1-3 seconds'; }
else if (301 < engagementTimer && engagementTimer < 500) { gaLabel = '3-5 seconds'; }
else if (501 < engagementTimer && engagementTimer < 1000) { gaLabel = '5-10 seconds'; }
else if (1001 < engagementTimer && engagementTimer < 2000) { gaLabel = '10-20 seconds'; }
else if (2001 < engagementTimer && engagementTimer < 6000) { gaLabel = '20-60 seconds'; }
else { gaLabel = 'More than 1 minute'; }
if (typeof(ga) !== 'undefined') { ga('send', 'event', 'Exit-Intent Popup', gaAction, gaLabel); }
/* If true, the user has stayed on the page after the pop-up triggered */
setTimeout(function() {
if (typeof(ga) !== 'undefined') { ga('send', 'event', 'Exit-Intent Popup', 'Continued interest after exit'); }
Cookies.set('continuedInterest', true);
}, 5000);
}
function loadScript(src, callback) {
var s = document.createElement('script');
var head = document.head;
s.type = "text/javascript";
s.async = true;
s.src = src;
s.addEventListener('load', function () {
callback();
}, false);
head.appendChild(s);
}
loadScript('https://www.klaviyo.com/media/js/public/klaviyo_subscribe.js', function() {
KlaviyoSubscribe.attachToForms("#popup_signup", {
hide_form_on_success: true,
custom_success_message: true,
list:'JYAS9B',
success: proceed
});
});
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && !Cookies.get('viewedOuibounceModal')) {
/* Handle mobile trigger */
setTimeout(function() {
triggerMobileBanner();
}, 2000);
} else {
/* Handle desktop trigger */
ouibounce(false, {
aggressive: true, /* Remove this line before deploying to a live environment */
sensitivity: 20,
cookieExpire: 5000,
callback: triggerDesktopPopup
});
}
})();
</script>
<style>
/* Helper classes */
.position-foreground {
z-index: 6;
}
/* Exit-intent Styles */
@-webkit-keyframes $animation-name {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes $animation-name {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes $animation-name {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes $animation-name {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@-moz-keyframes $animation-name {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@keyframes $animation-name {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
.exit-intent {
font-family: 'proxima_nova_rgregular', 'Helvetica';
padding-top: 120px;
padding-bottom: 120px;
position: fixed;
overflow: auto;
-webkit-overflow-scrolling: touch;
top: 0 !important;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
.exit-intent .layer {
background-image: none;
background-size: cover;
}
.popup-behind {
max-width: 90%;
width: 650px;
position: absolute;
top: 140px;
height: 358px;
background-color: #fff;
position: relative;
margin: 0 auto;
}
.exit-intent .popup {
-webkit-animation: fade-in 0.5s;
-ms-animation: fade-in 0.5s;
-moz-animation: fade-in 0.5s;
-o-animation: fade-in 0.5s;
animation: fade-in 0.5s;
-webkit-animation: fly-in 0.5s;
-ms-animation: fly-in 0.5s;
-moz-animation: fly-in 0.5s;
-o-animation: fly-in 0.5s;
animation: fly-in 0.5s;
box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08);
color: black;
position: relative;
margin: 0 auto;
max-width: 90%;
width: 600px;
background-color: #fff;
}
.exit-intent.closing .popup {
-webkit-animation: fly-out 0.5s;
-ms-animation: fly-out 0.5s;
-moz-animation: fly-out 0.5s;
-o-animation: fly-out 0.5s;
animation: fly-out 0.5s;
-webkit-animation: fade-out 0.5s;
-ms-animation: fade-out 0.5s;
-moz-animation: fade-out 0.5s;
-o-animation: fade-out 0.5s;
animation: fade-out 0.5s;
}
.exit-intent .overlay {
background: #000;
filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
position: fixed;
background: rgba(0, 0, 0, 0.8);
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.exit-intent input, .exit-intent button {
font-size: 1rem;
box-sizing: border-box;
}
.exit-intent button:hover {
cursor: pointer;
}
.exit-intent-banner {
width: 100%;
height: auto;
background-color: #fff;
color: black;
position: absolute;
top: 0px;
}
.exit-intent-banner h1 {
text-align: center;
text-transform: uppercase;
font-weight: bold;
padding: 25px 20px 5px 20px;
font-size: 20px;
}
.exit-intent .exit-intent-banner button.purple,
.exit-intent .text-container button.purple {
font-size: 16px;
color: #8F1D83;
padding: 0px 18px;
line-height: 45px;
min-width: 230px;
display: inline-block;
text-align: center;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 3px !important;
border: 1px solid #8F1D83;
background-color: rgba(143, 29, 131, 0.16);
margin: 0px auto 20px;
display: block;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.exit-intent-banner button:hover {
cursor: pointer;
}
.exit-intent .error_message {
text-align: center;
}
.mobile-image-container img,
.desktop-image-container img {
width: 100%;
height: 100%;
}
.exit-intent .text-container .title h1 {
font-weight: bold;
text-align: center;
margin-top: 40px;
text-transform: uppercase;
font-size: 20px;
margin-bottom: 25px;
}
.exit-intent .text-container .description p {
text-align: center;
font-size: 16px;
padding: 10px 50px 10px;
}
.exit-intent .text-container hr {
height: 2px;
border: 0px solid transparent;
background: #333;
width: 60px;
display: block;
margin: auto;
}
.exit-intent .text-container input,
.exit-intent .text-container button {
display: block;
width: 250px;
border: 1px solid #000;
height: 45px;
margin: 10px auto;
padding: 10px;
text-align: center;
font-size: 15px;
}
.exit-intent .klaviyo_field_group input {
backgound-color: transparent;
color: #000;
}
.exit-intent .text-container button {
text-transform: uppercase;
background-color: #ddd;
color: #000;
font-weight: bold;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.exit-intent .text-container {
padding-bottom: 30px;
}
.exit-intent ::-webkit-input-placeholder {
color: #333;
}
.exit-intent ::-moz-placeholder {
color: #333;
}
.exit-intent :-ms-input-placeholder {
color: #333;
}
.exit-intent :-moz-placeholder {
color: #333;
}
body.popup-open {
overflow: hidden;
}
.exit-icon {
font-size: 30px;
position: absolute;
width: 20px;
height: 20px;
top: 3px;
right: 15px;
cursor: pointer;
}
.exit-icon.white {
color: #fff;
z-index: 999;
}
.exit-intent .hello-beautiful {
text-align: center;
padding-top: 25px;
}
.exit-intent .step.one .exit {
text-align: center;
cursor: pointer;
}
.exit-intent .step.one h1 {
margin-top: 0px !important;
}
@media (max-width: 768px) {
.exit-intent {
padding-top: 60px;
}
.medium-down--hide\! {
display: none;
}
}
@media (min-width: 769px) {
.medium--hide\! {
display: none;
}
.exit-intent .layer {
min-height: 358px;
display: flex;
}
.exit-intent .text-container {
flex: 1 1 50%;
padding-bottom: 0px;
}
.exit-intent .desktop-image-container {
flex: 1 1 50%;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment