jquery.cookie-consent
A simple jQuery plugin for requesting consent for cookie usage.
Live demo
See a live demo on CodePen
Installation
Using npm
npm install jquery.cookie-consent --save
Using CDN
<script src="https://cdn.jsdelivr.net/npm/jquery.cookie-consent/dist/jquery.cookie-consent.min.js"></script>
Or manually by including the script after the jQuery library
<script src="/path/to/jquery.cookie-consent.min.js"></script>
Usage
Create a consent request (displayed as a bar at the top of the page) - Bare minimum
<script type="text/javascript">
$(document).ready(function() {
$.cookieConsent();
});
</script>
Or, create a consent request from your own markup
<script type="text/javascript">
$(document).ready(function() {
$('#cookieConsent').cookieConsent();
});
</script>
<style type="text/css">
#cookieConsent{ background-color:white;text-align:center;display:none;position:fixed;z-index:65000;bottom:0px;width:100%;font-size:14px; }
#cookieConsent button.cookieAccept{ background:#090;color:white;border:none;border-radius:0.2em;margin:0.5em;padding:0.2em 0.5em 0.2em 0.5em;}
</style>
<div id="cookieConsent">Vi använder cookies. Om du fortsätter använda vår webbplats innebär det att du godkänner detta.<button class="cookieAccept">Jag förstår</button></div>
Or, specify some of the available options
<script type="text/javascript">
$(document).ready(function() {
$('#cookieConsent').cookieConsent({
message: 'This website uses cookies. By using this website you consent to our use of these cookies.'
});
});
</script>
Options
message - The consent message you want to show
message: 'This website uses cookies. By using this website you consent to our use of these cookies.'
style - Optional style for the consent message
style: 'color:green;'
consentMessage - The text shown on the consent button
consentMessage: 'I understand'
consentStyle - Optional style for the consent button
consentStyle: 'font-weight:bold;'
acceptClass - Class name assigned to the consent button
acceptClass: 'cookieAccept'
Default: cookieAccept
consentTime - Consent time in days (hides the consent request for this long)
consentTime: 365 // Hide it for 1 year
consentKey - Cookie / storage item name for consent information
consentKey: 'myItemName'
Default: cookiesConsentDate
storage - Where should we save the consent information?
storage: "local" // cookie => cookie, local => localStorage, session => sessionStorate (not really useful...)
Default: cookie
onInit - Function called on init
onInit: function(){ alert('Ready to go'); }
onConsent - Function called when consent is given
onConsent: function(){ alert('Thank you!'); }
testing - Always show the consent request (for testing)
testing: true
Default: false
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
38 Jan 5, 2023
9 Dec 16, 2022
7 Jun 8, 2022
37 Dec 24, 2022
849 Jan 9, 2023
17 Dec 3, 2022
24 Dec 28, 2022
133 Aug 13, 2023
1 Aug 22, 2022
1 Aug 10, 2022
2 Nov 7, 2021
12 Aug 25, 2022
1.6k Dec 31, 2022
714 Jul 21, 2022
32 Dec 14, 2022