Block Third-party Cookies Until Receiving User Consent - jQuery Cookie Banner

File Size: 13.1 KB
Views Total: 1041
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Block Third-party Cookies Until Receiving User Consent - jQuery Cookie Banner

Yet another jQuery cookie consent plugin to make your website or web app comply with the GDPR and EU Cookie Law.

Cookies are files that help analyze web traffic. They save data about browsing habits and, among other issues, can be used for targeted advertising. 

Using this jQuery plugin for your visitors, you can ask them if they allow the cookie to be set or not, and block third-party cookies injected by external resources (like scripts, iframes, etc.) until they accepts them.

More Features:

  • 5 built-in languages: IT, EN, DE, ES, RU.
  • Triggers a function when the user accepts the cookies.
  • Automatically accepts all cookies on scroll & navigate.

See Also:

How to use it:

1. Load the Cookie Banner jQuery plugin's files in the document.

<link rel="stylesheet" href="/path/to/cookie-banner.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cookie-banner.js"></script>

2. Initialize the plugin and specify the path to the Privacy page.

$.cookieBanner({
  cookiePageUrl: {
    en: 'privacy.html'
  }
});

3. Initialize the plugin and specify the path to the Privacy page.

$.cookieBanner({
  cookiePageUrl: {
    en: 'privacy.html'
  }
});

4. Add the block-cookie class to the assets which should be blocked.

<!-- Block Images -->
<img class="block-cookie" data-src="1.png" alt="image blocked">

<!-- Block Iframes like Youtube videos -->
<iframe class="block-cookie" data-src="1.html"></iframe>

<!-- Block External Scripts -->
<script class="block-cookie" src="js/external-scripts.js"></script>

<!-- Block Inline Scripts -->
<script class="block-cookie">
  ...
</script>

5. That's it. By default, this plugin enables you to notify your visitors about your privacy policy by means of a message/banner and prevents third-party resources until the user agrees and clicks an accept button.

6. Available options to customize the plugin.

$.cookieBanner({

  // CSS class
  bannerClass: 'cookie-banner',

  // Custom link text
  bannerLinkText: {
    it: 'Approfondisci',
    en: 'Learn more',
    de: 'Mehr dazu',
    es: 'Descubre más',
    ru: 'Узнайте больше'
  },

  // Custom cookie consent messages
  bannerText: {
    it: 'Questo sito utilizza cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all\'uso dei cookie.',
    en: 'This website uses cookies (also third-party cookies) to provide you a better navigation experience. By closing this banner, scrolling this page or by clicking any of its elements, you agree to the use of cookies.',
    de: 'Diese Website verwendet Cookies, auch von Dritten, um Ihre Browser-Erfahrung zu verbessern. Durch das Schließen dieses Banners, das Scrollen durch diese Seite oder einen Klick auf deren Elemente, erklären Sie sich mit der Verwendung der Cookies einverstanden.',
    es: 'Este sitio web utiliza cookies propias y de terceros para mejorar tu experiencia de navegación. Cerrando este banner, recorriendo esta página o haciendo clic en cualquier elemento, autorizas el uso de cookies.',
    ru: 'Этот Сайт использует собственные и сторонние cookie-файлы для того, чтобы предоставить Вам больше возможностей при использовании сайта. Продолжая посещение веб-сайта, вы соглашаетесь на использование cookie-файлов.'
  },

  // Enables the plugin to block cookies
  blockCookie: true,
  blockCookieAttribute: 'data-src',
  blockCookieClass: 'block-cookie',

  // CSS class for the consent button
  consentButtonClass: 'cookie-banner__button',

  // Custom button text
  consentButtonText: {
    it: 'Chiudi',
    en: 'Close',
    de: 'Schließen',
    es: 'Cerrar',
    ru: 'Закрыть'
  },

  // CSS class for the button text
  consentButtonTextClass: 'cookie-banner__close',

  // Consent on scroll/navigate
  consentOnNavigation: true,
  consentOnScroll: true,

  // Config the cookies
  cookieExpiry: 365,
  cookieName: 'consentCookie',

  // Path to the privacy page
  cookiePageUrl: {
    it: '',
    en: '',
    de: '',
    es: '',
    ru: ''
  },

  // Default language
  culture: 'en',

  // Hide the cookie consent banner on scroll
  hideBannerOnScroll: true,
  
  // Prepends the cookie consent banner to a specific container
  prependBannerTo: 'body',

  // Reloads the page when button ("consentClass") is accepted
  reloadPage: false,

  // Callback
  onConsent: function() {},

});

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