Skip to content

MaxiMittel/cookie-popup-gdpr

Repository files navigation


Logo

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 - maximittel@outlook.de

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