View on GitHub

Introduction

Small jQuery plugin, which adds a simple Cookie Bar with info about cookies using. Plugin is simply modified and contains clever multilingual function.

From version 1.2 this plugin supports also GDPR (privacy protection) info.

---

Installing

The simplest ways to download and install this plugin.

1. Install

   1. Via npm

      $ npm i kovarp-jquery-cookiebar

   2. Clone repository

      $ git clone https://github.com/kovarp/jquery.cookieBar

   3. Direct download

      Download this plugin direct in latest version from GitHub repository.

      Download

2. Add to page

   1. Link plugin CSS file in page head

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

   2. Link plugin script file after jQuery

      <script src="jquery.min.js"></script>
      <script src="jquery.cookieBar.js"></script>

---

Using

Examples of plugin using.

Default initialization

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

Initialization with custom options

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

---

Options

style - Define style of display cookie bar on page

default: 'top'
options: 'top', 'bottom', 'bottom-left', 'bottom-right'

wrapper - Wrapper, where the cookie bar will prepended

default: 'body'
options: string

expireDays - Number of days, when the cookies will expires

default: 365
options: integer

infoLink - URL for "more info link"

default: 'https://www.google.com/policies/technologies/cookies/'
options: string

infoTarget - Targer for "more info link"

default: '_blank'
options: '_blank', '_self', '_parent', '_top'

language - Language of the cookie bar

default: $('html').attr('lang') || 'en'
options: 'ISO 639-1 Language Code'

The default value means, that the plugin detect automatically language from html lang attribute.

privacy - Show privacy protection button (GDPR)

default: false
options: false, 'popup', 'bs_modal', 'link'

privacyTarget - Target attribute for "privacy button link"

default: '_blank'
options: '_blank', '_self', '_parent', '_top'

privacyContent - Content for privacy button

default: null
options: null, 'custom HTML', 'Bootstrap modal ID', 'url'

---

Languages support

You can simply add new language for Cookie Bar. Just use addTranslation method.

$(function() {
	$.cookieBar('addTranslation', 'de', {
		message:	'Zur Bereitstellung von Diensten verwenden wir Cookies. Durch die Nutzung dieser Website stimmen Sie zu.',
		acceptText:	'OK',
		infoText:	'Mehr Informationen',
		privacyText:	'Datenschutz'
	});
});

Then, you can initialize the Cookie Bar with your own language.

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

Feel free to make pull request with your new language. ;)

---

Detect cookies state

You can detect, if user agreed with cookies using. The plugin save this information in cookie with name cookies-state. So, you can just read this value by JS or PHP and check, if the value equals accepted.

---