{"id":21076105,"url":"https://github.com/shaack/cookie-consent-js","last_synced_at":"2025-04-05T03:09:47.614Z","repository":{"id":43667565,"uuid":"291646480","full_name":"shaack/cookie-consent-js","owner":"shaack","description":"A simple dialog and framework to handle the German and EU law about cookies in a website (December 2021)","archived":false,"fork":false,"pushed_at":"2025-01-11T16:15:48.000Z","size":154,"stargazers_count":74,"open_issues_count":0,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T02:05:13.805Z","etag":null,"topics":["cookie-consent","cookie-settings","dialog","dsgvo","gdpr","gdpr-cookie"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/shaack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-08-31T07:32:26.000Z","updated_at":"2025-03-05T15:50:59.000Z","dependencies_parsed_at":"2024-06-20T23:25:50.082Z","dependency_job_id":null,"html_url":"https://github.com/shaack/cookie-consent-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fcookie-consent-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fcookie-consent-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fcookie-consent-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fcookie-consent-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaack","download_url":"https://codeload.github.com/shaack/cookie-consent-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"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-consent","cookie-settings","dialog","dsgvo","gdpr","gdpr-cookie"],"created_at":"2024-11-19T19:26:37.354Z","updated_at":"2025-04-05T03:09:47.595Z","avatar_url":"https://github.com/shaack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cookie-consent-js\n\nA simple dialog and framework to handle the EU law (as written by EuGH, 1.10.2019 – C-673/17) about cookies in a\nwebsite.\n\n- **Internationalizable**\n  with [language files](https://github.com/shaack/cookie-consent-js/tree/master/cookie-consent-content)\n- **No external dependencies** (and it works also with Bootstrap)\n- **Responsive**, it works on mobile and desktop devices\n- **Style** cookie-consent-js via `css` or `scss` to fit your website\n- It is fully **Customizable** with properties\n\n## References\n\n- [Demo pages with usage examples](https://shaack.com/projekte/cookie-consent-js/index.html)\n- [GitHub repository](https://github.com/shaack/cookie-consent-js)\n- [npm package](https://www.npmjs.com/package/cookie-consent-js)\n\n## Usage\n\nFollow these easy steps to integrate the cookie settings in your page.\n\n### 1. Install\n\n- Install cookie-consent-js in your project with `npm install cookie-consent-js`\n- Alternatively you can download the [git repository](https://github.com/shaack/cookie-consent-js)\n\n### 2. Include the CSS\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/node_modules/cookie-consent-js/src/cookie-consent.css\"/\u003e\n```\n\nThis should be done before any bootstrap or other frameworks CSS. You can overwrite styling in your projects CSS, take a\nlook at [cookie-consent.scss](https://github.com/shaack/cookie-consent-js/blob/master/src/cookie-consent.scss).\n\n### 3. Include the js\n\n```html\n\u003cscript src=\"/node_modules/cookie-consent-js/src/cookie-consent.js\"\u003e\u003c/script\u003e\n```\n\nLoad the js in your websites `\u003chead\u003e` or at the bottom of the `\u003cbody\u003e`.\n\n### 4. Initialize the Script\n\n```js\nconst cookieConsent = new CookieConsent({\n    contentUrl: \"/node_modules/cookie-consent-js/cookie-consent-content\", // location of the language files\n    privacyPolicyUrl: \"/privacy-policy.html\"\n})\n```\n\nIn `props` you should at least define `contentUrl` and `privacyPolicyUrl`. See below \"Configuration properties\".\n\n### 5. Enable \"Cookie settings\" in your service navigation\n\n```html\n\u003ca href=\"javascript:cookieConsent.reset()\"\u003eCookie settings\u003c/a\u003e\n```\n\nSo the user can anytime reconfigure, if he wants tracking or not.\n\n### 6. Enable or disable tracking depending on the users configuration\n\n**Client side JavaScript**: Surround your tracking code with\n\n```js\nif (cookieConsent.trackingAllowed()) {\n    // Google Analytics code and/or other tracking code\n}\n``` \n\n**Server side PHP**: Surround your tracking code with\n\n```php\nif($_COOKIE['cookie-consent-tracking-allowed'] === 'true') {\n    // do some tracking\n}\n```\n\n**All other languages**: Just read, if the cookie `cookie-consent-tracking-allowed` is \"true\"\n\n...that's all! [Contact me](https://shaack.com), if you have questions.\n\n## API\n\nThis framework writes a cookie (it's default name is `cookie-consent-tracking-allowed`)\nwith the value `\"true\"`, if the user has accepted tracking. You can read the value with the JavaScript\nAPI (`cookieConsent.trackingAllowed()`) or from any other language, server or client side, which can read cookies.\n\n### JavaScript API\n\n#### Show the settings dialog again\n\n```js\ncookieConsent.reset()\n```\n\nUse this to allow the user to reconfigure the cookie settings, for example, in your service navigation as \"Cookie\nsettings\".\n\n#### Read the status\n\n```js\ncookieConsent.trackingAllowed()\n```\n\nReturns `true` if the user did accept tracking cookies. Use this function to disable tracking. Surround tracking code,\nlike the Google Analytics code with\n\n```js\nif (cookieConsent.trackingAllowed()) {\n    // Google Analytics code and/or other tracking code\n}\n``` \n\n### Read the status from PHP\n\nRead the cookie from a PHP server with\n\n```php\nif($_COOKIE['cookie-consent-tracking-allowed'] === 'true') {\n    // do some tracking\n}\n```\n\n## Configuration properties\n\nWith default values.\n\n```js\nself.props = {\n    buttonPrimaryClass: \"btn btn-primary\", // the \"accept all\" buttons class, only used for styling\n    buttonSecondaryClass: \"btn btn-secondary\", // the \"accept necessary\" buttons class, only used for styling\n    autoShowModal: true, // disable autoShowModal on the privacy policy page, to make that page readable\n    blockAccess: false, // set \"true\" to block the access to the website before choosing a cookie configuration\n    position: \"right\", // position (\"left\" or \"right\"), if blockAccess is false\n    postSelectionCallback: undefined, // callback, after the user has made a selection\n    lang: navigator.language, // the language, in which the dialog is shown\n    defaultLang: \"en\", // default language, if the `lang` is not available as translation in `cookie-consent-content`\n    content: [], // deprecated, we now have a `content` folder, which contains the language files\n    contentUrl: \"./cookie-consent-content\", // the url of the \"cookie-consent-content\" folder, which contains the language files\n    privacyPolicyUrl: \"privacy-policy.html\",\n    cookieName: \"cookie-consent-tracking-allowed\",  // the name of the cookie, the cookie is `true` if tracking was accepted\n    modalId: \"cookieConsentModal\" // the id of the modal dialog element\n}\n```\n\n### Disable autoShow\n\nYou can disable `autoShowModal`, for instance, in the privacy policy and legal notice pages to make _these_ pages better\nreadable.\n\n```js\nvar cookieConsent = new CookieConsent({\n    autoShowModal: false,\n    privacyPolicyUrl: \"privacy-policy.html\",\n    contentUrl: \"./cookie-consent-content\"\n})\n```\n\n## Styling\n\nSee `./src/cookie-consent.scss` and overwrite values as you need in your project's stylesheet.\n\n## Disclaimer\n\nYou can use this banner for your website free of charge under the [MIT-License](./LICENSE).\n\nThe banner and framework was designed in cooperation with data protection officers and lawyers. However, we can not\nguarantee whether the banner is correct for your website and assume no liability for its use.\n\n---\n\nFind more high quality modules from [shaack.com](https://shaack.com)\non [our projects page](https://shaack.com/works).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fcookie-consent-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaack%2Fcookie-consent-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fcookie-consent-js/lists"}