After 10 seconds on the page the following popup will appear to prompt the visitor to a special offer. This offer may include a conversion form.
$(document).ready(function() {
function read_cookie(k,r){return(r=RegExp('(^|; )'+encodeURIComponent(k)+'=([^;]*)').exec(document.cookie))?r[2]:null;}
var contactConsent = read_cookie('contactConsent');
if (contactConsent === "1") {
//They already clicked on the popup.
} else if (contactConsent === "0"){
//They didn't like the last popup.
} else {
$('#contactConsent').delay('10000').slideDown();
$("#contactConsentAccept").on('click', function(event) {
event.preventDefault();
document.cookie = "contactConsent=1;path=/";
console.log('accepted');
//location.reload();
});
$("#contentConsentDecline i").on('click', function(event) {
event.preventDefault();
javascript:new function(){var c=document.cookie.split(";");
for(var i=0;i<c.length;i++){
var e=c[i].indexOf("=");
var n=e>-1?c[i].substr(0,e):c[i];
document.cookie=n+"=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
document.cookie = "contactConsent=0;path=/";
$("#contactConsent").slideUp();
}(); return void(0);
});
};
});
<div id="contactConsent" style="display: none;">
<div id="contentConsentDecline"><i class="fa fa-close"></i></div>
<h3>Special Offer!</h3>
<p>Get a free pre-visit consultation. Our team would love to hear about your dental priorities.</p>
<iframe height="415"
allowTransparency="true"
frameborder="0"
scrolling="auto"
style="width:100%;border:none;overflow: scroll;"
src="https://fremauxdental.wufoo.com/embed/w1gqqj4w0gt2z1t/">
</iframe>
</div>
/* ContactConsent - Popup Conversion System
============================================== */
#contactConsent{
position: fixed;
width: 320px;
background-color:#fff;
border:1px solid #5555;
bottom: -2px;
left: 15px;
padding:20px;
z-index: 99999999;
box-shadow: 2px 8px 30px #888;
}
#contactConsent #contentConsentDecline{
position: absolute;
top: -15px;
right: -15px;
border:1px solid black;
border-radius: 25px;
background-color:#fff;
width:25px;
height:25px;
}
#contactConsent #contentConsentDecline i{
font-size:12px;
cursor: pointer;
position: absolute;
left:7px;
top:6px;
}
#contactConsent h3{
display: block;
text-align: center;
font-size:80%;
}
#contactConsent p{
display: block;
text-align: center;
font-size: 80%;
}
#contactConsent iframe{}
/* Xtra Small Devices (phone, 768px and below) */
@media (max-width: 425px) {
#contactConsent{
display: none !important;
}
}
/* ============================================= */