cookie-popup-gdpr

Cookie Popup

View Demo · Report Bug · Request Feature

Install

npm i cookie-popup-gdpr

Or if you want to load it via a CDN, paste this in the head tag of your site.

<script src="https://cdn.jsdelivr.net/npm/cookie-popup-gdpr/dist/popup.min.js"></script>

If you get an error like exports is not defined add this var exports = {}; to your Code. (Example can be found in example.html).

Usage

To configure and show the popup add the code below to your website. You can find more information about the configuration below.

let config = {
  heading: "This site contains cookies",
  //Rest of your configuration
};

window.onload = function () {
  let popup = new CookiePopup(config);
};

An full example can be found on JSFiddle

Configuration

CookiePopupConfig

name	type	description
heading	string	The heading of your cookie popup.
informationText	string	Will be displayed below your heading and should give the user a short description what cookies are and why they are required.
checkboxes	Array<CheckboxItem>	Define what cookie categories the user will be able to opt in/out of. More information about the type CheckboxItem below.
buttons	Array<ButtonItem>	Define what predefined checkbox combinations the user will be able to select. More information about the type ButtonItem below.
tableHeads	Array<string>	Headings for the columns of the service table. (service table is defined in CheckboxItem)
callback	(res: Array<ResultObject>) => void	This function will be called after the user made a selection.
style	string	Provide your own stylesheet. Will default to the "popup.css" file.
position	string	Defines the position of the popup. Poissble values: top, top-left,top-right,bottom, bottom-left,bottom-right
savePref	boolean	Defines if the user will be able to save his preferences.
savePrefDefault	boolean	Defines the default value of the save preferences checkbox.

CheckboxItem

name	type	description
title	string	The label for the checkbox.
required	boolean	If true the checkbox will be disabled and set to true otherwise it will have the value of the checked attribute below.
checked	boolean	Determines the default value of the checkbox.
name	string	Choose a descriptive and unique name for this cookie category.
description	string	A short description of the intended use of these cookies.
services	Array<Array<string>>	Provide information about the used cookies. NOTE: Length of the inner list must be equal to the length of the attribute tableHead in the config

ButtonItem

name	type	description
title	string	The text inside the button.
onclick	() => void	Define the onclick behaviour of the button. Use check and uncheck functions the define checkbox presets.
green	boolean	If true button will be depicted in green otherwise in default color.

ResultObject

name	type	description
name	string	The unqiue name of the category specified in the CheckboxItem
checked	boolean	Shows whether the user opted in or out of the category.
services	Array<Array<string>>	A List of all the services in this category.

Presets

As mentioned in the configuration above you can define checkbox presets, you would usually do this in a ButtonItem with the functions check and uncheck. Both functions take an undefined amount of arguments of type string with names (defined in CheckboxItem) of cookie categories. NOTE: Names must be unique.

let buttonItem = {
  title: "Only necessary",
  onclick: () => {
    check("necessary");
    uncheck("marketing", "location");
  },
};

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Maximilian Mittelhammer - @maxi_maximittel - [e-mail]

Project Link: https://github.com/MaxiMittel/cookie-popup-gdpr