adriandmitroca / cookie-consent-box

A tiny, dependency-free cookie box widget that helps you to be GDPR complaint after including 8 kB of code (gzipped)

cookie-consent-box

This is a simple package that lets you add good-looking cookie box to your website within few seconds without any setup required. If you would like to see how it works and looks, make sure to check out the demo.

Usage

Webpack

You can install the package via package manager of your choice:

$ yarn add cookie-consent-box
$ npm install cookie-consent-box

Import it as normal ES6 module:

import CookieBox from 'cookie-consent-box';

new CookieBox({ options }).init();

and include in your SCSS file:

@import "~cookie-consent-box/dist/cookie-consent-box";

CDN

Or include it via jsDelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cookie-consent-box.min.css" />
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cookie-consent-box.min.js"></script>

Additionaly, you can configure the plugin using CookieBoxConfig object declared in your DOM. Just make sure that you declared it before you load js file.

Example:

<script>CookieBoxConfig = { backgroundColor: '#ec008c', url: '/privacy-policy' }</script>

Available Options

Option	Type	Default	Description
backgroundColor	string	#007bff	Color used for background
textColor	string	#fff	Color used for text
language	string	en	ISO 639 code. Supported languages: en, de, pl, ro, it, fr, pt
url	string/null	null	Custom URL that points to your Privacy Policy page. If empty, link is automatically hidden.
linkTarget	string	_blank	The target parameter for the url above.
containerWidth	int	1140	Width of your page container
cookieKey	string	cookie-box	Cookie name that is used to save users acceptance
cookieDomain	string	defaults to the host portion of the current document location	The domain that the cookie belongs to
cookieExpireInDays	int	365	The number of days after which the cookie expires
content	object/null	defaults to language	Content object accepts following properties: title, content, accept, learnMore.

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.

Credits

• Adrian Dmitroca
• Alexander Pepper
• Daniel Stancu
• All Contributors

cookie-consent-box's Issues

Won't create a Cookie after click on "Accept"

Hi,
I am using your module with Nuxt 2.11.0 and It looks perfect.
It also hides after I click on "Accept" but it won't create a cookie for the user.
Therefor after a reload the box appears again.
Do you have any idea what the problem could be?
Thank you!

Italian translation

  it: {
    title: 'Cookie policy',
    content: 'Il nostro sito usa i cookie tecnici per funzionare e per assicurarsi che la tua esperienza sia consistente tra le visite.',
    accept: 'Accetta',
    learnMore: 'Altre informazioni',
  }

Make text customizable

Text is hardcoded into the languages variable, it would be nice to be able to pass it at as array or json.

It appears on every reload

Hi,
Thanks for creating such an amazing cookie consent box.
I'm testing it and the box appears every time I reload the page. This is happening in all the browsers I tried.
As far as I understand in the documentation, it should be hidden for 365 days when clicking Accept (I didn't modify the default value).

I didn't modify the CSS or JS before copying them to my website and I just updated the background color and language when calling the script from my index.html.

Do you know what could be causing this trouble?

Thanks in advance!