Notice: CookieNoticeJS is not under active development for the time being (and not GDPR compliant for what I know). Check AOEPeople fork instead.
CookieNoticeJS
CookieNoticeJS is a very simple and small (→ 2 kB gzip) vanilla JS script that provides an easy way to show that damn cookie notice on your website. Simply add the following tag to your website footer:
<script src="js/cookie.notice.min.js"></script>
And you will get a dismissable banner on the bottom of your pages showing a default cookie audit like the following:
We use cookies to make sure you can have the best experience on our website. If you continue to use this site we assume that you will be happy with it.
Depending on the visitor browser language one of the preloaded translation will be shown. At the moment CookieNoticeJS supports EN, IT, DE, FR, OC and HU. If you want to contribute with an extra language do not hesitate to open an issue or a PR.
CookieNoticeJS has been successfully tested on IE9+, Chrome, Firefox and Safari.
Customize CookieNoticeJS
For the most of you including the script should be enough but CookieNoticeJS comes with many customization options. Let's see an example:
<script src="js/cookie.notice.min.js"></script>
<script>
new cookieNoticeJS({
// Localizations of the notice message
'messageLocales': {
'it': 'Custom localized message'
},
// Localizations of the dismiss button text
'buttonLocales': {
'it': 'Chiudi'
},
// Position for the cookie-notifier (default=bottom)
'cookieNoticePosition':'top',
// Shows the "learn more button (default=false)
'learnMoreLinkEnabled':false,
// The href of the learn more link must be applied if (learnMoreLinkEnabled=true)
'learnMoreLinkHref':'/learn/more/index.html',
// Text for optional learn more button
'learnMoreLinkText':{
'en':'learn more'
},
// The message will be shown again in X days
'expiresIn': 30,
// Dismiss button background color
'buttonBgColor': '#d35400',
// Dismiss button text color
'buttonTextColor': '#fff',
// Notice background color
'noticeBgColor': '#000',
// Notice text color
'noticeTextColor': '#fff',
// the lernMoreLink color (default='#009fdd')
'linkColor':'#f00'
});
</script>
1.8k Oct 7, 2022
2.9k Dec 25, 2022
72 Aug 25, 2021
2 Feb 14, 2022
233 Dec 13, 2022
12.5k Jan 4, 2023
10 Dec 26, 2022
159 Nov 10, 2022
5 Oct 16, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
72 Dec 27, 2022
3 Dec 13, 2022
20.6k Jan 4, 2023
8.6k Jan 5, 2023
9 Dec 16, 2022