I am trying to create a popup that will prompt a website visitor to speak with support staff. Once the user has seen the popup, however, I want to make sure that they do not get that proactive popup again when they go to other parts of the website.
To do this I was trying to create a cookie which will expire in 1 day, and have the popup hidden if the script can retrieve that cookie from the visitor. This is the code I have so far. The popup works fine, but I cannot get it to see the cookie and hide the popup when I visit the page a second time.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dialogBox</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dialogbox.css">
</head>
<body style="background:#eee">
<div id="dialog"></div>
<div id="message"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.dialogBox.js"></script>
<script>
var messageCookie = document.cookie;
if (messageCookie) {
//if message cookie is present, then hide chat popup
$('#dialog').hide();
}
else {
//do nothing
}
</script>
<script>
$(function(){
var dialog = (function(){
$('#dialog').dialogBox({
hasClose: true,
effect: 'fade',
hasBtn: true,
confirmValue: 'Chat Now',
hasMask: true,
confirm:function(){
//Put website alive chat here
},
title: '',
content: 'Click the button below to chat with an expert',
callback: function(){
console.log('loading over')
setCookie(messageCookie, 1);
}
})
})
setTimeout(dialog, 1000);
})
</script>
<script type="text/javascript">
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire