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
  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.