{"id":21204583,"url":"https://github.com/jersyfi/js-cookify","last_synced_at":"2025-06-10T16:05:44.085Z","repository":{"id":51366322,"uuid":"300688495","full_name":"Jersyfi/js-cookify","owner":"Jersyfi","description":"Simple cookie consent manager with tracking possibility in pure javascript.","archived":false,"fork":false,"pushed_at":"2023-01-11T22:55:46.000Z","size":782,"stargazers_count":16,"open_issues_count":3,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-06T17:12:19.837Z","etag":null,"topics":["bootstrap","consentcookie","cookie-banner","cookie-consent","cookie-consent-banner","cookies","cookify","gdpr","javascript","vanilla-javascript","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":"https://cookify.jersyfi.dev/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jersyfi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-02T17:25:05.000Z","updated_at":"2024-04-03T13:39:01.000Z","dependencies_parsed_at":"2023-02-09T08:47:02.205Z","dependency_job_id":null,"html_url":"https://github.com/Jersyfi/js-cookify","commit_stats":null,"previous_names":["jersyfi/cookify"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Fjs-cookify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Fjs-cookify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Fjs-cookify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jersyfi%2Fjs-cookify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jersyfi","download_url":"https://codeload.github.com/Jersyfi/js-cookify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225628963,"owners_count":17499243,"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":["bootstrap","consentcookie","cookie-banner","cookie-consent","cookie-consent-banner","cookies","cookify","gdpr","javascript","vanilla-javascript","vanilla-js","vanillajs"],"created_at":"2024-11-20T20:37:12.151Z","updated_at":"2024-11-20T20:37:12.958Z","avatar_url":"https://github.com/Jersyfi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"/img/socialcard.jpg\" alt=\"Social Card of Cookify\"\u003e\u003c/p\u003e\n\n![NPM Downloads](https://img.shields.io/npm/dt/cookify)\n![NPM](https://img.shields.io/npm/v/cookify)\n![Github Code Size](https://img.shields.io/github/languages/code-size/jersyfi/cookify)\n![GitHub License](https://img.shields.io/github/license/jersyfi/cookify)\n\n# Cookify\n\n## General info\nThis is a simple full customizable cookie consent banner for gdpr law. This library is build on pure javascript for easy customization. You can choose your own CSS Framework, your own styles and only need to define query selectors.\n\n### Live preview of Vanilla JS Version\nView the test file live on GitHub Pages and get in touch with Cookify. The test file used the Vanilla JS version.\n- [Bootstrap](https://jersyfi.github.io/cookify/test/preview/bootstrap.html)\n- [Tailwind CSS](https://jersyfi.github.io/cookify/test/preview/tailwindcss.html)\n\n## Documentation\n\n### Get started\n\nTo start with that project you can simple install Cookify with npm.\n\n```bash\nnpm install cookify\n```\n\nAfter that you need to import the npm module correctly. How you need to import the npm correctly to your project depends on you. I will give an simple example for importing a npm module and how to initialize it in ordner to use the functions correctly.\n\n```javascript\nimport Cookify from Cookify\n\nvar cookify = new Cookify\n```\n\nFor customization you can inicialize Cookify with the following variables or functions described below. Every variable and function has a default value that you don't need to set it. But you need to watch on the described sheme in order to inicialize correctly.\n\n```javascript\nvar cookify = new Cookify(\n    dataName,\n    actionCallback,\n    trackingCallback,\n    saveWithChange,\n    saveByDefault,\n    cookieDefault,\n    initCallback\n)\n```\n\ndataName -\u003e string (default: cookify) \\\nactionCallback -\u003e function (default: () =\u003e {})\\\ntrackingCallback -\u003e function (default: () =\u003e {})\\\nsaveWithChange -\u003e boolean (default: false)\\\nsaveByDefault -\u003e boolean (default: false)\\\ncookieDefault -\u003e string (default: necessary)\\\ninitCallback -\u003e function (default: () =\u003e {})\n\nTo explain the initialization better i will give a simple example with all variables and functions and how to use them. `dataName` is for the name that will show in the data storage for Cookify. The `actionCallback` is called after the user clicked on the following `data-c-action` fields. With that function you can close the cookie consent field as an example. Then you have the function `trackingCallback` for tracking user activity. This function needs a data variable where the data[0] stores all types and the viewed state and data[1] stores the actual date. `saveWithChange` can be set if you want to change the user selection when clicking on the input fields. The `saveByDefault` variable is for saving the selection when loading the first time. Then we have the `cookieDefault` variable where you can set the default cookie type name. At last we have the `initCallback` function that can for example be used to determine if the consent dialog should be shown after Cookify did its initialization.\n\n```javascript\nvar cookify = new Cookify('cookie_consent', function () {\n    document.getElementById('element').style.display = 'none'\n  }, function (data) {\n    console.log(data)\n  }, false, false, 'necessary',\n    function(cookify) {\n        //show the cookie popup as long as the user has not seen it\n        if (cookify.getDataState(cookify.viewedName)) {\n            document.getElementById('element').style.display = 'none';\n        } else {\n            document.getElementById('element').style.display = 'block';\n        }\n    }\n)\n```\n\n### Query Names\n\nThe query names are necessary for using Cookify. There are different checkboxes for controlling the cookie activity and you can handle the cookies with a few different actions. Below are all usable query names and how to use them properly.\n\nYou can only use the `data-c-check` on input fields. As an example for type checkbox.\n\n**data-c-check=\"{string}\"**\n\n```html\n\u003cinput data-c-check=\"necessary\" type=\"checkbox\"\u003e\n```\n\nYou are able to set a preset value of the field. When you don't set this default value it is false.\n  \n**data-c-check-default=\"{boolean}\"** (default: false)\n\n```html\n\u003cinput data-c-check=\"necessary\" data-c-check-default=\"true\" type=\"checkbox\"\u003e\n```\n\nYou have 3 ways to for saving. Use `accept` when you want the user to save the selected fields, `all` will select all fields and save them and `necessary` is for selecting only the necessary field.\n  \n**data-c-action=\"{string}\"**\n  - necessary (Save only the required cookies)\n```html\n\u003cdiv data-c-action=\"necessary\"\u003eNecessary\u003c/div\u003e\n```\n  - all (Save the selected cookies)\n```html\n\u003cdiv data-c-action=\"all\"\u003eAll\u003c/div\u003e\n```\n  - accept (Save all cookies)\n```html\n\u003cdiv data-c-action=\"necessary\"\u003eNecessary\u003c/div\u003e\n```\n### Enabling or disabling content\n\n#### Scripts\nThat you are able to handle the scripts for the user selected types you need to set `data-c-script` where it is necessary. It is only possible to use the types that are used in the query names `data-c-check`. This will either work for scripts with import src or with inline scripts.\n\n**data-c-script=\"{string}\"**\n\n```html\n\u003cscript type=\"text/plain\" src=\"example.js\" data-c-script=\"necessary\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/plain\" data-c-script=\"necessary\"\u003e\n  console.log(example)\n\u003c/script\u003e\n```\n\n#### Iframes and Images\nInstead of changing the type Cookify will switch the `src` element of iframe or img tags depending on the consent given. For that `data-c-fallback` (used if no consent was given) and `data-c-src` (used if consent was given) need to be set. The `data-c-script` attribute will be used to determine the category as for scripts. It is recommended to set the src already to the fallback to avoid connections before cookify is initialized.\n\n```html\n\u003cimg data-c-script=\"necessary\" src=\"/path/to/fallback.jpg\" data-c-fallback=\"/path/to/fallback.jpg\" data-c-src=\"/example.jpg\"/\u003e\n\n\u003ciframe data-c-script=\"necessary\" src=\"about:blank\" data-c-fallback=\"about:blank\" data-c-src=\"https://example.org\"\u003e\u003c/iframe\u003e\n```\n\n### Helpers\n\nWhen you want to know the exact state of a type or if the user viewed and agreed the consent already then use the `getDataState()` function. The output is a boolean value (true or false).\n\n```javascript\ncookify.getDataState('type')\n\ncookify.getDataState(cookify.viewedName)\n```\n\n## Framework Support \u0026 Features\n\n| Framework  | State      | Repository                                                         |\n| :---       | :---       | :---                                                               |\n| Vanilla JS | Production | [@Jersyfi/cookify](https://github.com/Jersyfi/Cookify)             |\n| React      | Dev        | [@Jersyfi/react-cookify](https://github.com/Jersyfi/react-cookify) |\n| Vue.js     | Planned    | -                                                                  |\n\n| Frameworks /\u003cbr\u003e Features   | Vanilla JS | React | Vue.js |\n| :---                        | :---: | :---: | :---: |\n| TypeScript                  | ❌ | ✅ | ❌ |\n| Headless                    | ✅ | ✅ | ❌ |\n| Customizable                | ✅ | ✅ | ❌ |\n| Tracking                    | ✅ | ✅ | ❌ |\n| Storage: *HTTP cookies*     | ✅ | ✅ | ❌ |\n| Storage: *Web Storage API*  | ❌ | ✅ | ❌ |\n| Managing: *Script* [^1]     | ✅ | ⚠️ | ❌ |\n| Managing: *Img* [^1]        | ✅ | ⚠️ | ❌ |\n| Managing: *iframe* [^1]     | ✅ | ⚠️ | ❌ |\n\n[^1]: ⚠️ Only in Vanilla JS the support is integrated because in Framworks like React you can do it with the state `consentObject`\n\n## Concept Overview\n![null](https://user-images.githubusercontent.com/64214261/211401065-3a622b5c-dc57-4719-9f2e-eea714b156e7.png)\n\n## Changelog\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Credits\n- [Jérôme Bastian Winkel](https://github.com/jersyfi)\n- [All Contributors](../../contributors)\n\n## License\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjersyfi%2Fjs-cookify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjersyfi%2Fjs-cookify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjersyfi%2Fjs-cookify/lists"}