Documentation of
GDPR Cookie Law JavaScript GDPR Consent Plugin

Install

  1. 1 Copy the gdpr-cookie-law folder to your server’s document root folder, next to your index.html file. The gdpr-cookie-law folder contains the css and js folders.
  2. 2 Add the GDPR Cookie Law CSS file to the head section on your page:
     
    <link rel="stylesheet" href="http://your-domain.com/gdpr-cookie-law/css/gdpr-cookie-law.min.css">
  3. 3 Add the GDPR Cookie Law JavaScript files to the head or the body section on your page:
     
    <script src="http://your-domain.com/gdpr-cookie-law/js/gdpr-cookie-law.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var gdprCookieLaw = new GDPRCookieLaw({
        moreLinkHref: 'http://your-domain.com/privacy-policy'
    });
    gdprCookieLaw.init();
});
</script>
  4. 4 Set the parameters as you need.

Options & Methods

Use of parameters

You can use a JavaScript object literal for adding parameters. A JavaScript object literal is a comma-separated list of name-value pairs wrapped by curly braces. For example: 
{
    moreLinkHref: 'http://your-domain.com/privacy-policy',
    zIndex: 1000000,
    iconStatus: true,
    iconSize: '1.5em',
    iconColor: '#fff',
    onShowEnd: function() {
        // Your code
    }
}
Important! Do not add a comma after the last value.

How to parameter the plugin

You have the option to add parameters to the plugin constructor:
document.addEventListener('DOMContentLoaded', function () {
    var gdprCookieLaw = new GDPRCookieLaw(add_your_object_literal_here);
    gdprCookieLaw.init();
});
After you added the parameters:
document.addEventListener('DOMContentLoaded', function () {
    var gdprCookieLaw = new GDPRCookieLaw({
        moreLinkHref: 'http://your-domain.com/privacy-policy',
        zIndex: 1000000,
        iconStatus: true,
        iconSize: '1.5em',
        iconColor: '#fff'
    });
    gdprCookieLaw.init();
});

Options

You can override the default value by changing the value of the specified property.

You can see the full option list below:
Property Possible Values Default Value Description
expire e.g. 30, 365, 1000, etc. 365 The cookie’s expiration in days.
breakpoint e.g. '768px', '992px', '48em', etc. '768px' Set the width to recognize the layout. If that is greater than the specified value, the elements will be placed next to each other. Otherwise, they will be placed under each other.
zIndex e.g. null, '1000', '1111111111', etc. '1000000000' The z-index of the pop-up.
delay e.g. null, 500, 1000, etc. null The pop-up appears after the specified time (milliseconds).
theme e.g. null, 'theme-dark', 'theme-light', 'theme-1', 'theme-2', ... 'theme-10', 'theme-light-1', 'theme-light-2' ... 'theme-light-10', and 'theme-mixed-1', 'theme-mixed-2' ... 'theme-mixed-10', etc. null The theme of the pop-up. If you set a theme the following options do not apply: background color, background color opacity and the font color of the pop-up, the 'More information' link font color, background color and font color of the accept button (included the hover, focus and active states).
animationStatus true, false true Enable or disable the animation status of the pop-up.
animationDuration e.g. 500, 1000, etc. 500 The duration time of the animation in milliseconds.
animationName null, 'fade', 'slide', 'fade-slide' 'fade' The type of the animation.
position 'bottom', 'bottom-left', 'bottom-center', 'bottom-right', 'top', 'top-left', 'top-center', 'top-right' 'bottom' The position of the pop-up.
margin e.g. null, '10px', '20px', '30px', etc. null The margin of the pop-up.
padding e.g. '10px', '20px', '30px', '20px 30px', etc. '20px' The padding of the pop-up.
width e.g. null, 'auto', '400px', '500px', etc. 'auto' The width of the pop-up. It is recommended to use it when top-left | top-right | bottom-left | bottom-right position is specified.
bgColor e.g. '#454545', '#369', '#000', '#fff', etc. '#09a0e1' The background color of the pop-up.
bgColorOpacity e.g. 0.5, 0.6, 0.85, etc. 1 The background color transparency of the pop-up.
boxShadowStatus true, false true Enable or disable the shadow of the pop-up. If the value is true, the shadow appears. If the value is false, the shadow does not appear.
boxShadowHorizontalOffset e.g. '0px', '10px', etc. '0px' The horizontal offset of the shadow.
boxShadowVerticalOffset e.g. '0px', '10px', etc. '0px' The vertical offset of the shadow.
boxShadowBlur e.g. '5px', '10px', '30px', etc. '30px' The blur of the shadow.
boxShadowSpread e.g. '0px', '10px', '30px', etc. '0px' The spread of the shadow.
boxShadowColor e.g. '#000', '#454545', etc. '#000' The color of the shadow.
boxShadowOpacity e.g. 0.05, 0.5, 0.8, 1, etc. 0.05 The transparency of the shadow.
fontFamily e.g. null, 'Arial, sans-serif', '"Times New Roman", serif' etc. null The font family of the pop-up.
fontSize null, '13px', '14px', '16px', etc. '16px' The font size of the pop-up.
fontWeight e.g. 'normal', 'bold', 'lighter', 'bolder', '100', '900', etc. 'normal' The font weight of the pop-up. Possible values ​​may vary by font family.
color e.g. '#333', '#369', '#454545', '#fff', etc. '#fff' The font color of the pop-up.
contentWidth e.g. null, 'auto', '1170px', '1200px', etc. 'auto' The width of the pop-up’s contents.
contentAndBtnHorizontalSpace e.g. '32px', '48px', '3em', etc. '3em' The horizontal space between the description and the button.
contentAndBtnVerticalSpace e.g. '16px', '32px', '2em', etc. '2em' The vertical space between the description and the button.
iconStatus true, false true Enable or disable the appearenace of the cookie icon. You have the option to appear or disappear the cookie icon in the pop-up.
iconHideBelowBreakpointStatus true, false false Enable or disable the appearenace of the cookie icon below the breakpoint.
iconHorizontalSpace e.g. '10px', '20px', '1em', etc. '1em' The horizontal space between the cookie icon and description.
iconVerticalSpace e.g. '10px', '20px', '1em', etc. '0.5em' The vertical space between the cookie icon and description.
iconSize e.g. '24px', '32px', '2em', etc. '24px' The size of the cookie icon.
iconColor e.g. '#333', '#369', '#454545', '#fff', 'currentColor', etc. 'currentColor' The color of the cookie icon.
desc 'Any text what you want' 'We use cookies to ensure that we give you the best experience on our website. By continuing to use our site, you accept our cookie policy.' The description of the pop-up.
customAnchors e.g. [ { id: 'cookies', href: 'http://your-domain.com/cookies', title: 'About cookies', target: '_blank', text: 'cookies' }, { id: 'cookiePolicy', href: 'http://your-domain.com/privacy-policy', title: 'Cookie policy', target: '_blank', text: 'cookie policy' } ] null You can add custom anchors to the description. E.g. desc: 'We use {{cookies}} to ensure that we give you the best experience on our website. By continuing to use our site, you accept our {{cookiePolicy}}.'
moreLinkStatus true, false true Enable or disable the appearance of the 'More information' link. If the value is true, the 'More information' link appears. If the value is false, the 'More information' link does not appear.
moreLinkDecorationStatus true, false true Enable or disable the decoration of the 'More information' link. If the value is true, the decoration appears. If the value is false, the decoration does not appear.
moreLinkDecorationType 'none', 'dotted', 'dashed', 'solid' 'dotted' The decoration type of the 'More information' link.
moreLinkDecorationColor e.g. null, 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The color of the 'More information' link’s decoration.
moreLinkDecorationColorHover e.g. null, 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The hover color of the 'More information' link’s decoration.
moreLinkDecorationColorFocus e.g. null, 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The focus color of the 'More information' link’s decoration.
moreLinkDecorationColorActive e.g. null, 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The active color of the 'More information' link’s decoration.
moreLinkText 'Any text you want' 'More information' The text of the 'More information' link.
moreLinkColor e.g. 'currentColor', '#333', '#369', '#454545', '#fff', etc. '#fff' The font color of the 'More information' link.
moreLinkColorHover e.g. 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The hover font color of the 'More information' link.
moreLinkColorFocus e.g. 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The focus font color of the 'More information' link.
moreLinkColorActive e.g. 'currentColor', '#333', '#369', '#454545', '#fff', etc. 'currentColor' The active font color of the 'More information' link.
moreLinkFontFamily e.g. null, 'Arial, sans-serif', '"Times New Roman", serif' etc. null The font family of the 'More information' link.
moreLinkFontSize null, '13px', '14px', '16px', etc. '16px' The font size of the 'More information' link.
moreLinkFontWeight e.g. 'normal', 'bold', 'lighter', 'bolder', '100', '900', etc. 'bold' The font weight of the 'More information' Link. Possible values ​​may vary by font family.
moreLinkHref URL e.g. 'http://your-domain.com/privacy-policy' null The href attribute of the 'More information' link.
moreLinkTarget URL e.g. null, '_blank', '_parent', '_self', '_top' '_blank' The target attribute of the 'More information' link.
moreLinkTitle URL e.g. null, 'More information about cookies', etc. null The title attribute of the 'More information' link.
btnAcceptText 'Any text you want' 'Accept' The text of the accept button.
btnAcceptPaddingTop e.g. '10px', '12px', '15px' etc. '15px' The top padding of the accept button.
btnAcceptPaddingRight e.g. '48px', '52px', '56px', etc. '56px' The right padding of the accept button.
btnAcceptPaddingBottom e.g. '10px', '12px', '13px' etc. '13px' The bottom padding of the accept button.
btnAcceptPaddingLeft e.g. '48px', '52px', '56px', etc. '56px' The left padding of the accept button.
btnAcceptBgColor e.g. '#333', '#369', '#454545', '#fff', etc. '#0780c0' The background color of the accept button.
btnAcceptBgColorHover e.g. '#333', '#369', '#454545', '#fff', etc. '#0670b0' The hover background color of the accept button.
btnAcceptBgColorFocus e.g. '#333', '#369', '#454545', '#fff', etc. '#0670b0' The focus background color of the accept button.
btnAcceptBgColorActive e.g. '#333', '#369', '#454545', '#fff', etc. '#0670b0' The active background color of the accept button.
btnAcceptColor e.g. '#333', '#369', '#454545', '#fff', etc. '#fff' The font color of the accept button.
btnAcceptColorHover e.g. '#333', '#369', '#454545', '#fff', etc. '#fff' The hover font color of the accept button.
btnAcceptColorFocus e.g. '#333', '#369', '#454545', '#fff', etc. '#fff' The focus font color of the accept button.
btnAcceptColorActive e.g. '#333', '#369', '#454545', '#fff', etc. '#fff' The active font color of the accept button.
btnAcceptBorderRadius e.g. null, '3px', '4px', '10px', '999px', etc. '999px' The radius of border for the button.
btnAcceptFontFamily e.g. null, 'Arial, sans-serif', '"Times New Roman", serif' etc. null The font family of the accept button.
btnAcceptFontSize null, '13px', '14px', '16px', etc. '14px' The font size of the accept button.
btnAcceptFontWeight e.g. 'normal', 'bold', 'lighter', 'bolder', '100', '900', etc. 'bold' The font weight of the accept button. Possible values ​​may vary by font family.

Methods

Callback functions allow you to run your own code when certain events occur.

You can see the full method list below:
Property Possible Values Default Value Description
onShowStart e.g. null, 'function () { console.log('onShowStart'); }', etc. null The onShowStart callback function is executed when the appearance of the pop-up has started.
onShowEnd e.g. null, 'function () { console.log('onShowEnd'); }', etc. null The onShowEnd callback function is executed when the appearance of the pop-up has finished.
onAcceptStart e.g. null, 'function () { console.log('onAcceptStart'); }', etc. null The onAcceptStart callback function is executed when the user has clicked the accept button.
onAcceptEnd e.g. null, 'function () { console.log('onAcceptEnd'); }', etc. null The onAcceptEnd callback function is executed when the user clicked the accept button and the pop-up has become completely invisible.

Plugin Examples

Find several examples on the demo page, that demonstrate the key features of the plugin.

Browser compatibility

The GDPR Cookie Law JavaScript plugin is compatible with all major browsers.
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera
  • Edge

Note

GDPR Cookie Law plugin provides the necessary regulations that affected by cookies. It doesn’t offer full compliance with GDPR as you have to follow further rules, that can be discussed by your GDPR consultant or law firm.

Changelog

You can also find the version history (changelog.txt) file on the root folder. 
------------------------------------------------------------------------------------------------------------------
Version 1.0.3 - Apr 24 2021
------------------------------------------------------------------------------------------------------------------

- Added: New options (moreLinkDecorationColor, moreLinkDecorationColorHover, moreLinkDecorationColorFocus, moreLinkDecorationColorActive, moreLinkColorHover, moreLinkColorFocus, moreLinkColorActive)
- Updated: Documentation

------------------------------------------------------------------------------------------------------------------
Version 1.0.2 - Dec 20 2020
------------------------------------------------------------------------------------------------------------------

- Added: Callback functions (onShowStart, onShowEnd, onAcceptStart, onAcceptEnd)
- Added: New options (moreLinkTarget, moreLinkTitle)
- Updated: Documentation

------------------------------------------------------------------------------------------------------------------
Version 1.0.1 - Oct 5 2020
------------------------------------------------------------------------------------------------------------------

- Added: 10 new themes
- Updated: Documentation

------------------------------------------------------------------------------------------------------------------
Version 1.0.0 - Oct 3 2020
------------------------------------------------------------------------------------------------------------------

- Initial release

Support

Support for my items includes:
  • + Answer for questions related with the plugin
  • + Answering technical questions about item’s features
  • + Assistance with reported bugs and issues
  • + Help with included 3rd party assets
Item support does not include:
  • − Customization Services
  • − Installation Services

Contact

Please remember you purchased a very affordable plugin and you don’t have to pay for a full-time web design agency for the developing. Occasionally, I will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and I provide it for your convenience, so please be patient, polite and respectful.

Contact me via email on my profile page or ask your question in the plugin’s comments section.