README.MD

bsgdprcookies by Aleksander Woźnica

A jQuery based plugin that shows bootstrap modal with cookie info. It is GDPR/RODO compatible. The plugin shows the message on the users first visit and then every 30 days (by default).

Here is a demo page hosted by jqueryscript.net

You can choose between two options:

• Simple (message with accept button)

• Advanced (message, customize and accept button)

Usage

1. Include Bootstrap

Here is how: https://getbootstrap.com/docs/4.1/getting-started/introduction/

2. Include plugin script (must be after jQuery)

<script src="jquery.bs.gdpr.cookies.js"></script>

3. Initialise bsgdprcookies

// Example with default settings
$(document).ready(function() {
    $('body').bsgdprcookies();
});

// Example with custom settings
var settings = {
    message: '(...)',
    messageMaxHeightPercent: 30,
    delay: 1000,
    OnAccept : function() {
        console.log('Yay! User accepted your cookies window!');
    }
}

$(document).ready(function() {
    $('body').bsgdprcookies(settings);
});

If you want to give the user possibility to choose again, add html button:

<button id="cookiesBtn" role="button">Choose!</button>

and javascript code:

//(...)
$('#cookiesBtn').on('click', function(){
    $('body').bsgdprcookies(settings, 'reinit');
});

More examples can be found in the repository.

Settings

Setting	Default Value	Description
id	'bs-gdpr-cookies-modal'	id of the modal
class	empty	additional modal classes
title	'Cookies & Privacy Policy'	modal title
backdrop	'static'	A click area for dismissing shown modals when clicking outside the modal
message	'Your cookie message...'	Message
messageScrollBar	false	Attach vertical scroll to the message (requires to specify messageMaxHeightPercent)
messageMaxHeightPercent	25	Max message height in %
delay	1500	Delay before showing modal (in ms)
expireDays	30	Days to show the accept modal again
moreLinkActive	true	Adds more link at the end of the message
moreLinkLabel	'More informations..'	More link text
moreLinkNewTab	true	Open new tab when user clicks more link
moreLink	'privacy-policy.php'	More link
acceptButtonLabel	'Accept'	Accept button text
allowAdvancedOptions	false	Activate advanced options (customize button)
advancedTitle	'Select which cookies you want to accept'	Text above advanced options checkboxes
advancedAutoOpenDelay	1000	Time (in ms) to automatically show customize options (when "reinit" is set)
advancedButtonLabel	'Customize'	Customize button text
OnAccept	function() {}	Specify what to do after acceptance
advancedCookiesToSelect		see below

How to set custom cookies to select (advancedCookiesToSelect)

Setting	Description
name	Custom cookie name
title	Checkbox label
description	Description displayed when hovering
isFixed	If true the option will always be selected

// Default values
advancedCookiesToSelect: [
    {
        name: 'necessary',
        title: 'Necessary',
        description: 'Required for the site to work properly',
        isFixed: true
    },
    {
        name: 'preferences',
        title: 'Site Preferences',
        description: 'Required for saving your site preferences, e.g. remembering your username etc.',
        isFixed: false
    },
    {
        name: 'analytics',
        title: 'Analytics',
        description: 'Required to collect site visits, browser types, etc.',
        isFixed: false
    },
    {
        name: 'marketing',
        title: 'Marketing',
        description: 'Required to marketing, e.g. newsletters, social media, etc',
        isFixed: false
    }
],

Methods

$.fn.bsgdprcookies.GetUserPreferences - returns user preferences saved in cookie

$.fn.bsgdprcookies.PreferenceExists - check if user preference exists in cookie (returns true/false)

Styling

I dont include any css files. Feel free to adapt it to your website design!

Author

Aleksander Woźnica

License

This plugin is available under the MIT license.

The plugin has been inspired by ihavecookies