Multi-language Cookie Notice Bar Plugin - cookieBar

Multi-language Cookie Notice Bar Plugin - cookieBar
File Size: 14.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery based cookie notice plugin that makes your website & blog comply with the European cookie law and GDPR (General Data Protection Regulation).

The plugin makes it easier to create a multi-language, customizable cookie consent message that informs visitors your site uses cookies.

The cookie notice bar is dismissable and saves the user selection in the cookies.

How to use it:

1. Load the main stylesheet jquery.cookieBar.min.css in the header of the document.

<link rel="stylesheet" href="jquery.cookieBar.min.css">

2. Load jQuery library and the main JavaScript jquery.cookieBar.min.js at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.cookieBar.min.js"></script>

3. Create a default cookie notice bar that will be stay on the top of the webpage.

$(function() {
  $.cookieBar();
});

4. Change the position of the cookie notice bar. Available position values: 'top', 'bottom', 'bottom-left', and 'bottom-right'.

$(function() {
  $.cookieBar({
    style: 'top'
  });
});

5. Don't forget to replace the URL of your Privacy Policy page.

$(function() {
  $.cookieBar({
    infoLink:   'https://www.jqueryscript.net/privacy/',
    infoTarget: '_blank'
  });
});

6. Customize the Cookies Expiration Date (Default: 365 days)

$(function() {
  $.cookieBar({
    expireDays: 365
  });
});

7. Specify where the cookie notice bar should be appended to.

$(function() {
  $.cookieBar({
    wrapper: 'body'
  });
});

8. Change the lauange of the cookie consent message. Supported language: 'en', 'de', 'cs', 'sk'.

$(function() {
  $.cookieBar({
    language: 'en'
  });
});

9. Add your own language strings just like this:

translation['en'] = {
  message:  'We use cookies to provide our services. By using this website, you agree to this.',
  acceptText: 'OK',
  infoText: 'More information'
};

translation['de'] = {
  message:  'Zur Bereitstellung von Diensten verwenden wir Cookies. Durch die Nutzung dieser Website stimmen Sie zu.',
  acceptText: 'OK',
  infoText: 'Mehr Informationen'
};

translation['cs'] = {
  message:  'K poskytování služeb využíváme soubory cookie. Používáním tohoto webu s&nbsp;tím souhlasíte.',
  acceptText: 'V pořádku',
  infoText: 'Více informací'
};

translation['sk'] = {
  message:  'Na poskytovanie služieb využívame súbory cookie. Používaním tohto webu s&nbsp;tým súhlasíte.',
  acceptText: 'V poriadku',
  infoText: 'Viac informácií'
};

Changelog:

2018-06-04

  • GDPR privacy protection info support
  • Checkout the demo page for more examples

This awesome jQuery plugin is developed by kovarp. For more Advanced Usages, please check the demo page or visit the official website.