Multi-language Cookie Notice Bar Plugin - cookieBar

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', 'ru', 'ua', 'pl', 'es'.

$(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 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 tým súhlasíte.',
  acceptText: 'V poriadku',
  infoText: 'Viac informácií'
};

10. Enable the GDPR privacy notice.

$(function() {
  $.cookieBar({

    // 'popup', 'bs_modal', 'link'
    privacy:        false,

    // target property
    privacyTarget:  '_blank',

    // 'custom HTML', 'Bootstrap modal ID', 'url'
    privacyContent: null
    
  });
});

Changelog:

2021-09-06

• rel="noopener" attribute added do info link

v1.2.6 (2020-08-25)

• padding bottom reset fix

2020-08-20

• Added more translations

2020-03-04

• Fixed for responsive design.

2019-09-07

• Added class "has-cookie-bar" to body element when the cookie bar is visible

2019-07-31

• Fixed broken code if language not found in translation list

2019-02-13

• PL translation added

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.