I’ve recently added a Mailchimp signup pop-up to a Webflow site. I’ve followed the excellent cookie guide from Vincent Bidaux here: https://cookie-template.webflow.io and it works exactly as expected: on first visit the pop-up displays, and once closed it won’t display for the set time.
I was wondering if it’s possible to add to this. Once a user completes the Mailchimp signup in the pop-up and then closes it, the pop-up won’t display again for that user (even after the time period has expired)?
Basically, closing the form hides it for days, but successfully submitting the form and then closing the pop-up would change the cookie to never display it again.
If I understand correctly, you want the popup to re-appear at some date in the future but if they’ve subscribed, you want to make sure they don’t see it again.
You could do something where, on submission of the Mailchimp form, the cookie expiry is changed to a date much further in the future.
$('mailchimp-form').on('submit',function(){
if ($.cookie('alert')) {
var futureDate = new Date('Sun, 31 Dec 2099 00:00:01 GMT')
$.cookie('alert', true, { expires: futureDate });
}
})
I have not tested this code myself but let me know if you have any problems!
To check I’ve understood correctly (before I break anything), I’m currently using this script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
if (!$.cookie('alert')) {
$('.popup-overlay').show();
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
$.cookie('alert', true, { expires: date });
}
});
</script>
With .popup-overlay as the corresponding pop-up.
Would I need to integrate the above within the tags to get the dual functionality of not showing for a day on close, and not showing for like 100 years on submit?
Yes. As the above code within that “if” statement only runs if the cookie doesn’t exist, you’d put the new code below that:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
if (!$.cookie('alert')) {
$('.popup-overlay').show();
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
$.cookie('alert', true, { expires: date });
};
$('#mailchimp-form').on('submit',function(){
if ($.cookie('alert')) {
var futureDate = new Date('Sun, 31 Dec 2099 00:00:01 GMT')
$.cookie('alert', true, { expires: futureDate });
};
console.log(document.cookie);
})
});
</script>
Where ‘#mailchimp-form’ is the form ID. The additional line console.log(document.cookie) will display the cookie in your browser’s console so you can read through it to check that the expiry date has changed. You can get to the browser console in Chrome using Ctrl+Shift+J (on Windows) or Option+Command+J (on Mac).
Ok thanks for the info, I set that up and looked at the broker console in chrome, I had the following error come up:
A cookie associated with a cross-site resource at [Mailchimp sign-up url] was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details
It seems to be working as expected but any ideas if the above is an issue?
@sarwech, @iyw This conversation is great! I’m currently trying to go through and get this code working on my client’s site. However, I’m running into issues of getting the pop-up to not show after an email is added, using this code from your discussion above:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
if (!$.cookie('alert')) {
$('.pop-up-modal').show();
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
$.cookie('alert', true, { expires: date });
};
$('https://cielo.us17.list-manage.com/subscribe/post?u=3fcc6d1368ac86439280cc67b&id=45596b5e8f').on('SUBSCRIBE',function(){
if ($.cookie('alert')) {
var futureDate = new Date('Sun, 31 Dec 2099 00:00:01 GMT')
$.cookie('alert', true, { expires: futureDate });
};
console.log(document.cookie);
})
});
</script>
Is there anything you can see that I’m doing wrong or should switch? Here is the link to my site: Demo Site
Hi Sarwech. Is it possible to set a cookie (the same ‘alert’ cookie) when a user arrives at a page on the site via an email link?
This would be useful because once cookies are cleared (which will probably happen eventually), the browser will not know that the user has previously signed up and will offer signup again - which will be particularly irritating to the user since they are cleared signed up as they arrived from an email link.
