Multilingual Cookie Consent Banner With jQuery - serialcookie

A simple, customizable, multilingual cookie consent banner plugin that enables your visitors to load the specified assets (like Google Analytics) when they consent to the use of cookies on your site.

How to use it:

1. Load the jQuery serialcookie plugin's files in the document.

<link rel="stylesheet" href="/path/to/dist/jquery.serialcookie.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialcookie.js"></script>

2. Initialize the serialcookie plugin and load the specified assets using the callback function as follows:

$(document).ready(function(){
  $.serialcookie({
    callback: function(isAccepted){
      if( isAccepted ){
        // do something here
      }
    }
  });
});

3. Specify the language you'd like to use. By default, the plugin will automatically apply the corresponding translation to the cookie consent bar based on the lang attribute in the html element.

$(document).ready(function(){
  $.serialcookie({
    lang: 'auto',
    translations: {
      en: {
        description: 'This website makes use of cookies to enhance browsing experience and provide additional functionality',
        reject: 'Reject',
        accept: 'Accept'
      },
      fr: {
        description: 'Ce site utilise des cookies pour améliorer l\'expérience de navigation et fournir des fonctionnalités supplémentaires.',
        reject: 'Refuser',
        accept: 'Accepter'
      },
      de: {
        description: 'Diese Internetseite verwendet Cookies, um die Nutzererfahrung zu verbessern und den Benutzern bestimmte Dienste und Funktionen bereitzustellen.',
        reject: 'Ablehnen',
        accept: 'Annehmen'
      },
      it: {
        description: 'I cookie ci aiutano a fornire i nostri servizi. Utilizzando tali servizi, accetti l\'utilizzo dei cookie da parte nostra.',
        reject: 'Rifiutare',
        accept: 'Accettare'
      },
      pt: {
        description: 'Este site utiliza cookies para melhorar a experiência de navegação e disponibilizar funcionalidades adicionais.',
        reject: 'Rejeitar',
        accept: 'Aceitar'
      },
      es: {
        description: 'Esta web utiliza cookies para mejorar la experiencia y proporcionar funcionalidades adicionales.',
        reject: 'Rechazar',
        accept: 'Aceptar'
      },
      ru: {
        description: 'На этом веб-сайте используются файлы cookie для улучшения пользовательского опыта и обеспечения дополнительной функциональности.',
        reject: 'Отклонять',
        accept: 'Принимать'
      }
    }
  });
});

4. Override the default template:

$(document).ready(function(){
  $.serialcookie({
    template:
      '<div id="serialcookie">'+
        '<div id="serialcookie-col-1">{description}</div>'+
        '<div id="serialcookie-col-2">'+
          '<span id="serialcookie-reject" data-serialcookie="reject">{reject}</span>'+
          '<span id="serialcookie-accept" data-serialcookie="accept">{accept}</span>'+
        '</div>'+
      '</div>',
  });
});

5. Override the default CSS to create your own styles:

#serialcookie {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background-color: #fff;
  font-size: 14px;
  color: #000;
  text-align: center;
  line-height: 1.5;
}

#serialcookie-col-1 {}

#serialcookie-col-2 {
  display: flex;
  margin-left: 50px;
}

#serialcookie-reject,
#serialcookie-accept {
  padding: 15px 20px;
  cursor: pointer;
  transition: 300ms;
}

#serialcookie-reject {
  border: 2px solid rgba(0, 0, 0, .2);
  color: #000;
}

#serialcookie-reject:hover {
  border-color: rgba(0, 0, 0, .3);
}

#serialcookie-accept {
  margin-left: 20px;
  background-color: #000;
  color: #fff;
}

#serialcookie-accept:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
}

@media (max-width:640px) {
  #serialcookie {
    flex-wrap: wrap;
  }
  #serialcookie-col-2 {
    margin-left: 0;
    margin-top: 20px;
  }
}

---

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