{"id":20976907,"url":"https://github.com/pixelbrackets/cookie-consent","last_synced_at":"2025-10-25T02:28:12.906Z","repository":{"id":145819576,"uuid":"131851919","full_name":"pixelbrackets/cookie-consent","owner":"pixelbrackets","description":"🍪 Standalone script to display a cookie consent to comply with EU cookie law","archived":false,"fork":false,"pushed_at":"2024-06-03T10:02:17.000Z","size":27,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-03T12:07:05.882Z","etag":null,"topics":["cookie","cookie-banner","cookie-consent","gdpr","php"],"latest_commit_sha":null,"homepage":"https://gitlab.com/pixelbrackets/cookie-consent/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelbrackets.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-02T13:07:45.000Z","updated_at":"2024-06-03T10:02:16.000Z","dependencies_parsed_at":"2024-06-03T11:56:56.270Z","dependency_job_id":null,"html_url":"https://github.com/pixelbrackets/cookie-consent","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbrackets%2Fcookie-consent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbrackets%2Fcookie-consent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbrackets%2Fcookie-consent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbrackets%2Fcookie-consent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelbrackets","download_url":"https://codeload.github.com/pixelbrackets/cookie-consent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225297832,"owners_count":17452010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie","cookie-banner","cookie-consent","gdpr","php"],"created_at":"2024-11-19T04:56:18.462Z","updated_at":"2025-10-25T02:28:07.868Z","avatar_url":"https://github.com/pixelbrackets.png","language":"JavaScript","readme":"# Cookie Consent\n\n🍪 Standalone script to display a cookie consent to comply with EU cookie law.\n\n*Yet another cookie consent bar… Whyyyyy❓❓*\n\n…Well, most of the popular existing solutions have issues like…\n\n- require loading the JavaScript through a CDN → which may track visitors and \n  therefore signifies a privacy issue\n- require a JavaScript framework like jQuery → which may not exist if the \n  current site only adds a cookie because of one tracking tool\n- add advertisements\n- add trackers\n- are hard to modify\n- set inline styles → don't allow separating scripts \u0026 styles, which makes it \n  harder to add custom stylesheets\n- have to many styles or no styles at all\n- hardcode labels/text in the JavaScript → limit translations \u0026 text changes\n- don't have an easy way to wrap dependent scripts\n- are too big/complex (mostly because styles, scripts \u0026 labels are mixed, and the \n  options to change all of them are more complex than the cookie logic itself)\n\nGoals of this library:\n\n- KISS\n- Separate JavaScript logic, CSS styles and HTML markup\n- Allow to copy/integrate a small, single JavaScript (no CDN, no framework)\n- Allow to change text/labels as desired (e.g. in application)\n- Add basic fallbacks (e.g. styles), which may be overwritten/removed/extended\n- Allow to gain different types of consent\n- Don't make any external requests\n- Don't manage multiple cookie sources (use a cookie consent manager instead)\n- Expose plain conditions for other JavaScripts depending on provided consent\n\n## Requirements\n\n- JavaScript\n- Internet Explorer \u003e 10, Edge \u003e 12, Safari \u003e 10, Opera \u003e 49, Firefox \u003e 48, Chrome \u003e 57\n\n## Demo\n\n🚀 https://pixelbrackets.gitlab.io/cookie-consent/\n\n## Preliminary considerations\n\n📚 Please read this section as a prerequisite prior to installing the script.\n\nThe most obvious reason for the EU cookie law is to inform the user about cookie \nusage. But even more important is the constraint for website operators to think \nabout cookie usage. They should ask themselves how intrusive a cookie is, \nwhat data does each cookie hold, is its lifespan appropriate to its purpose, \nis it a first or third‑party cookie, who controls the data?\n\nInstead of saying “we use all kinds of cookies, I don't even know which and why” \na website owner should be able to tell why and when cookies are used.\n\nA website needs to differentiate…\n\n* between first-party and third-party cookies,\n* between session and persistent cookies and\n* between necessary and non-necessary cookies.\n\nA cookie is »necessary« if it is required by the service for the sole purpose of \ncommunication and storing stateful data. A first-party cookie which stores a \nlogin state or items in a shopping cart and is limited to a session only \n(erased when the user closes the browser), may be necessary.\n\n👉 Not all cookies require a consent, see [European Commission - Internet Handbook](http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm).\n\n* First‑party session cookies DO NOT require informed consent.\n* First‑party persistent cookies DO require informed consent.\n* Third‑party session and persistent cookies DO require informed consent.\n\n| Origin | Duration | Requires consent |\n| ------ | -------- | ---------------- |\n| First‑party | Session | ❌ |\n| First‑party | Persistent | ✔ (except »necessary« cookies limited to a few hours, like shopping carts)|\n| Third‑party | Session | ✔ |\n| Third‑party | Persistent | ✔ |\n\nAlthough not mandatory it may be helpful to further differentiate between \ndifferent usage types of cookies.\n\n* Necessary cookies = storing stateful data, like a shopping cart or a login status\n* Experience cookies = user preferences, like data previously entered into forms\n* Analytical cookies = target user behaviour, like how often an item was clicked\n\nWhen this script was first created, there were still different views\non how to gain consent from a user.\n\n* Agreement due to continued usage → Only inform the user about cookie usage\n  and that the website will continue to do so if the user continues\n  to use the website.\n* Opt-Out → Inform the user about cookie usage, but let the user disagree to\n  usage of cookies with a click on a button. After that existing cookies\n  (except the denied consent) are removed and now new cookies created anymore.\n* Opt-In → User agrees to usage of cookies with a click on a button,\n  until then no non-necessary cookies are stored.\n\n🌪️ However, please note that since 2020 only an opt-in is a permissible form\nof consent to cookies within the EU! Users must actively consent,\npreset checkboxes or opt-outs are no longer permitted.\n\nOther regions, like the US, have different legal requirements. Consent due to\ncontinued usage is therefore still supported in this script,\nbut should no longer be used within the EU.\n\nThe cookie consent bar should link to a page informing about cookie usage (eg.\nprivacy notes)…\n\n* in plain, jargon‑free language\n* why cookies are used (to remember user actions, identify users etc.)\n* types of used cookies (e.g. session or permanent, first or third‑party)\n* who controls/accesses the cookie‑related information (first or third‑party)\n* how users can withdraw consent (e.g. close browser, clear cache, opt-out button)\n\nThe different origins, usage types and ways to gain consent are considered in \nthis repository. It uses »levels« for this, see sections »Usage \u0026 Levels«.\n\n## Installation\n\nPackagist https://packagist.org/packages/pixelbrackets/cookie-consent\n\n## Usage\n\nThe most important script of this package is `cookie-consent.js`, which\nhandles the consent. Everything else is optional. The script looks for\ncertain data attributes in elements with a certain class name. If everything\nis missing, then it will set default values instead.\n\nThe script stores what type of consent was given by the user and how long\nit is supposed to be valid. The consent is categorised into different »levels«.\nRead more about these levels in the following chapter.\n\nAll your own scripts, which want to write cookies or execute actions requiring\nconsent, must read the stored consent level to continue or cancel.\n\n### Integration\n\n🔰 Take a look at the `demo.html` file, which holds all example files.\n\n_Set up consent bar_\n- Copy the cookie consent bar HTML and integrate it into your own view\n  - Change the labels/text as you want, but try to keep the markup structure\n  - Add a link to a separate privacy page\n  - See the »configuration« section to learn how to change the default values\n    for consent levels and duration\n- Integrate `cookie.js` and `cookie-consent.js` into your own view\n  - Maybe concat and minify the files according to your own asset structure\n- Either copy the default stylesheet `cookie-consent.css` or write your own,\n  styles are independent of the script\n- The consent level is stored in a cookie called »cookie-consent«\n\n_Guard clause your own scripts_\n- Adapt all scripts with cookie actions to read the given consent level\n  from `cookie-consent`\n  - The example file `tracker.js` shows how to react to the level in JavaScript\n    ```javascript\n    if ($.cookie('cookie-consent') !== null \u0026\u0026 $.cookie('cookie-consent') \u003e= 50) {\n      /* Consent level 50 given, trigger action */\n    }\n    ```\n\n_Optional:_ Add your own consent events\n- Write your own actions to change the level stored in cookie `cookie-consent`\n  - The example file `tracker.js` shows how to set the level with inline JavaScript\n    ```html\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\" onClick=\"$.cookie('cookie-consent', 80, 720); return false;\"\u003eAccept all cookies\u003c/button\u003e\n    ```\n\n### Levels\n\nThe given consent is categorised into different »levels«. They are triggered by\ndifferent events, like continued usage of the website or a button click (Opt-In).\n\nAll other scripts need to ask for the current level to check whether they are \nallowed to write a cookie or not.\n\nThese behaviours are intended for the following levels:\n\n| Set Level 〽️ | Triggered by                     | Cookie Bar Visibillity | Cookie Types Allowed                    | Notes                                         |\n|--------------|----------------------------------|------------------------|-----------------------------------------|-----------------------------------------------|\n| `null`       | Browser blocks cookies           | Dont show              | None                                    | Website may not work                          |\n| 0            | Opt-Out                          | Dont show              | First Party, Session, Necessary cookies |                                               |\n| 1            | Agreement due to continued usage | Keep showing           | First Party, Session, Necessary cookies |                                               |\n| 10           | Agreement due to continued usage | Keep showing           | First-Party, Persistent, Experience     |                                               |\n| 20           | Agreement due to continued usage | Keep showing           | First-Party, Persistent, Analytical     |                                               |\n| 30           | Agreement due to continued usage | Keep showing           | Third-Party, Session, Experience        |                                               |\n| 40           | Agreement due to continued usage | Keep showing           | Third-Party, Persistent, Analytical     |                                               |\n| 50           | Opt-In                           | Dont Show              | First-Party, Persistent, Experience     | Missing necessary cookies here? See level `0` |\n| 60           | Opt-In                           | Dont Show              | First-Party, Persistent, Analytical     |                                               |\n| 70           | Opt-In                           | Dont Show              | Third-Party, Session, Experience        |                                               |\n| 80           | Opt-In                           | Dont Show              | Third-Party, Persistent, Analytical     | “Allow all cookies”                           |\n\n🏔️ You may define your own values between these levels or above level 80.\n\n#### Examples\n\nIn relation to the table above, the following use cases may require these levels:\n\n* Internal shopping cart → no consent required (you may check for level `1` or ignore it)\n* Internal form wizard (persist user input), shall be allowed by continued usage → requires at least level `10`\n* Internal tracking tool, shall be allowed by continued usage → requires at least level `20`\n* Internal tracking tool, shall be allowed by Opt-In only → requires at least level `50`\n* External form wizard (keep user input in session only), shall be allowed by continued usage → requires at least level `30`\n* External tracking tool, shall be allowed by continued usage → requires at least level `30`\n* External tracking tool, shall be allowed by Opt-In only → requires at least level `80`\n\n⚠️Example use cases, your use cases and internal requirements may differ.\n\n### Configuration\n\nTo let the script set and use different levels it is possible to configure\nwhich event triggers what consent level and how long this level is valid.\n\nTo do so the attributes `data-level` and `data-duration` may be set on two \ndifferent places.\n\n**Triggered by continued usage**\n\n* Level of cookie consent set by agreement due to continued usage\n  * Set in `data-level` attribute of `.cookie-consent` Element (DIV)\n  * Integer, levels as defined in the »levels« table above\n  * Default value »1«, usually »20«, always lower than »50«\n* Duration of cookie consent set by agreement due to continued usage\n  * Set in `data-duration` attribute of `.cookie-consent` Element (DIV)\n  * Integer, duration in hours\n  * Default value »8«, usually »8«, never greater than »8760« (365 days)\n\n**Triggered by Opt-In**\n\n* Level of cookie consent set by opt-in due to button click\n  * Set in `data-level` attribute of `.cookie-accept` Element (BUTTON)\n  * Integer, levels as defined in the »levels« table above\n  * Default value »50«, usually »80«\n* Duration of cookie consent set by opt-in due to button click\n  * Set in `data-duration` attribute of `.cookie-accept` Element (BUTTON)\n  * Integer, duration in hours\n  * Default value »8«, usually »8760«, never greater than »8760« (365 days)\n* Note: You may set up multiple opt-in buttons, all they need is a\n  `.cookie-accept` class and the desired `data` attributes\n\n❕ If the default values are sufficient for your app,\nyou even can omit the `data-*` attributes.\n\n🔰 Again, take a look at the `demo.html` file to try out different examples.\n\n## Source\n\nhttps://gitlab.com/pixelbrackets/cookie-consent\n\n## License\n\nGNU General Public License version 2 or later\n\nThe GNU General Public License can be found at http://www.gnu.org/copyleft/gpl.html.\n\n## Author\n\nDan Kleine (Dan Untenzu) (\u003cmail@pixelbrackets.de\u003e / [@pixelbrackets](https://github.com/pixelbrackets))\n\n## Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md)\n\n## Contribution\n\nThis script is Open Source, so please use, share, patch, extend or fork it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelbrackets%2Fcookie-consent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelbrackets%2Fcookie-consent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelbrackets%2Fcookie-consent/lists"}