{"id":23395793,"url":"https://github.com/netgen/javascript-cookie-control","last_synced_at":"2025-10-18T13:39:15.869Z","repository":{"id":48995856,"uuid":"137495154","full_name":"netgen/javascript-cookie-control","owner":"netgen","description":" Javascript module for controling cookie consent on your website","archived":false,"fork":false,"pushed_at":"2021-07-02T08:54:47.000Z","size":275,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T01:14:56.242Z","etag":null,"topics":["consent","cookie","gdpr","javascript"],"latest_commit_sha":null,"homepage":"https://netgen.io","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/netgen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-15T14:10:18.000Z","updated_at":"2022-08-29T11:46:07.000Z","dependencies_parsed_at":"2022-09-26T17:11:23.393Z","dependency_job_id":null,"html_url":"https://github.com/netgen/javascript-cookie-control","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/netgen%2Fjavascript-cookie-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgen%2Fjavascript-cookie-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgen%2Fjavascript-cookie-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netgen%2Fjavascript-cookie-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netgen","download_url":"https://codeload.github.com/netgen/javascript-cookie-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":["consent","cookie","gdpr","javascript"],"created_at":"2024-12-22T07:18:22.321Z","updated_at":"2025-10-18T13:39:10.825Z","avatar_url":"https://github.com/netgen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript cookie control\n\nJavascript module for controling cookie consent on your website.\n\n## Install\n\nInstall the Node dependency:\n```\nyarn add @netgen/javascript-cookie-control\n```\nor\n```\nnpm install --save @netgen/javascript-cookie-control\n```\n\n### Load\n\nTo load the required ES2015 module:\n```js\nimport CookieControl from '@netgen/javascript-cookie-control';\n```\n\n## Usage\n\n### HTML\nHTML markup for cookie control window shoud be:\n```html\n\u003cdiv id=\"ng-cc\"\u003e\n\n    \u003c!-- if you don't want to use the overlay, remove next div from the markup --\u003e\n    \u003cdiv class=\"ng-cc-overlay\"\u003e\u003c/div\u003e\n\n    \u003c!-- button for opening the window. Leave out if you don't need it --\u003e\n    \u003ca href=\"#\" class=\"js-open-ng-cc\"\u003eCookie settings\u003c/a\u003e\n\n    \u003cdiv class=\"ng-cc-modal\"\u003e\n\n        \u003c!-- button for closing the window. Leave out if you don't need it --\u003e\n        \u003ca href=\"#\" class=\"ng-cc-close ng-cc-close-btn\"\u003eclose\u003c/a\u003e\n\n        \u003cdiv class=\"ng-cc-content\"\u003e\n            \u003cdiv class=\"wrapper\"\u003e\n                \u003ch3\u003eThis site uses cookies.\u003c/h3\u003e\n                \u003cp\u003eSome text describing your cookie usage...\u003c/p\u003e\n\n                \u003cdiv class=\"ng-cc-actions\"\u003e\n                    \u003ca href=\"#\" class=\"optional-list-toggle\"\u003e\n                        \u003cspan\u003eCustomize settings!\u003c/span\u003e\n                        \u003cspan class=\"cookie-angle-up\"\u003e\u003c/span\u003e\n                    \u003c/a\u003e\n\n                    \u003c!-- button for accepting selected cookies and closing the window --\u003e\n                    \u003cbutton id=\"ng-cc-accept\" class=\"btn btn-primary\"\u003eI'm ok with this\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"ng-cc-optional-list\"\u003e\n                \u003cul\u003e\n                    \u003c!-- markup for the single cookie group (should be the same as the ones generated with js) --\u003e\n                    \u003cli\u003e\n                        \u003cinput type=\"checkbox\" class=\"ng-cc-optional-checkbox\" id=\"ng-cc-necessary\" data-name=\"necessary\" checked disabled /\u003e\n                        \u003clabel for=\"ng-cc-necessary\"\u003e\n                            \u003ci class=\"ng-cc-checkbox-icon\"\u003e\n                              \u003cspan class=\"on ng-cc-on\"\u003eAccepted\u003c/span\u003e\n                              \u003cspan class=\"off ng-cc-off\"\u003eNot accepted\u003c/span\u003e\n                            \u003c/i\u003e\n                            Necessary Cookies\n                        \u003c/label\u003e\n                        \u003cp\u003eThis website cannot function properly without these cookies.\u003c/p\u003e\n                    \u003c/li\u003e\n\n                    \u003c!-- this is where optional cookie groups are rendered --\u003e\n                \u003c/ul\u003e\n                \u003cdiv class=\"ng-cc-optional-actions clearfix\"\u003e\n                  \u003cbutton id=\"ng-cc-optional-save\" class=\"btn btn-outline-primary\"\u003e\n                    Save settings\n                  \u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JS\n\nCreate config object for cookie control plugin and initialize it:\n```js\nconst ccConfig = {\n  options: {\n    lifetime: 30,\n  },\n  optionalCookies: [\n    {\n      name: 'analytics',\n      label: 'Analytical Cookies',\n      description: 'Analytical cookies help us to improve our website by collecting and reporting information on its usage.',\n      accepted: true,\n      onRevoke() {\n        window['ga-disable-XX-XXXXX-X'] = true;\n      },\n    },\n    {\n      name: 'marketing',\n      label: 'Marketing Cookies',\n      description: 'We use marketing cookies to help us improve the relevancy of advertising campaigns you receive.',\n    },\n    {\n      name: 'socialsharing',\n      label: 'Social Sharing Cookies',\n      description: 'We use some social sharing plugins, to allow you to share certain pages of our website on social media',\n      onAccept: () =\u003e {\n        (function(d, s, id) {\n          var js, fjs = d.getElementsByTagName(s)[0];\n          if (d.getElementById(id)) return;\n          js = d.createElement(s); js.id = id;\n          js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1\u0026version=v3.0';\n          fjs.parentNode.insertBefore(js, fjs);\n        }(document, 'script', 'facebook-jssdk'));\n      },\n    },\n  ],\n};\n\n// create new cookie control instance\nconst cookieControl = new CookieControl(ccConfig);\n// initialize the plugin\ncookieControl.init();\n```\n\nSecond parameter for initializing new instance is optional string with the id of the plugin div. Default value is `ng-cc`.\nSo if you need to change it, use it like this:\n```js\nconst cookieControl = new CookieControl(ccConfig, 'new-id');\n```\n\n### Parameters for cookie control config:\n\nConfig object has two parameters.\n\n| Parameter | Type | Default value | Description |\n| :--- | :--- | :--- | :--- |\n| `options` | Object | | General options for the plugin |\n| `optionalCookies` | Array | | Array of objects for optional cookie groups |\n\nParameters for the `options` object (all are optional):\n\n| Parameter | Type | Default value | Description |\n| :--- | :---  | :--- | :--- |\n| `open` | boolean | true | Open the window on page load (doesn't open once the user accepts the cookies) |\n| `lifetime` | number | 365 | Lifetime of the saved cookie settings (in days) |\n| `domain` | string | | Domain for the saved cookie (e.g., 'example.com' or 'subdomain.example.com'). If not specified, this defaults to the host portion of the current document location. |\n| `acceptValue` | string | '1' | Value saved for the accepted cookie group |\n| `revokeValue` | string | '0' | Value saved for the revoked cookie group |\n| `timeout` | number | 200 | Timeout for auto open on page load (in milliseconds) |\n| `optionCookieHtml(cookie)` | function | | Function returning template for single optional cookie group. Function takes one object as parameter which has values for `name` (string), `label` (string), `description` (string) and `accepted` (boolean) and should return string with html |\n| `onChange(event, instance)` | function | | Function that gets executed on cookie group checkbox change. Function has two arguments. First one is checkbox change event from which you can get cookie group name (`e.target.dataset.name`) and if it's accepted or not (`e.target.checked`), and the other is instance of the plugin |\n| `onAccept(instance)` | function | | Function that gets executed on cookie accept button. Function has one argument, instance of the plugin |\n\n\nParameters for each `optionalCookies` object:\n\n| Parameter | Type | Default value | Description |\n| :--- | :--- | :--- | :--- |\n| `name` | string | | Name of the cookie group (used for storing the value) |\n| `label` | string | | Label for cookie group which is rendered in window next to the checkbox |\n| `description` | string | | Description for the cookie group rendered below checkbox and label |\n| `cookieName` (optional) | string | `ng-cc-` + `name` | Name for storing cookie group consent |\n| `accepted` (optional) | boolean | false | Set to true if you want that cookie group to be enabled by default |\n| `onAccept` (optional) | function | | Function that gets executed on plugin init if the cookie group is enabled |\n| `onRevoke` (optional) | function | | Function that gets executed on plugin init if the cookie group is disabled |\n\nYou can modify options of the plugin after creating the instance with `set('option', new_value)` function.\ne.g.:\n```js\ncookieControl.set('onChange', (e, instance) =\u003e {\n  console.log(e, instance);\n});\n```\n\n#### Behaviour\nThere is an event listener for the click on html elements containing css class `js-open-ng-cc` which opens the window. You can put it anywhere on your site if you need to.\n\nOn every cookie group checkbox change, plugin saves the cookie with that cookie name and accept or revoke value.\n\nWindow opens on every page load until user clicks the `#ng-cc-accept` button (if the `open` parameter isn't set to `false`). After that, the window doesn't open automatically for the duration of the cookie lifetime.\n\n### SCSS\nImport styles to scss file:\n```scss\n@import \"@netgen/javascript-cookie-control/scss/style\";\n```\n\nYou also need to configure sass-loader to understand imports from node_modules. Update your sass-loader config by changing `{ loader: 'sass-loader' }` to:\n```js\n{\n  loader: 'sass-loader',\n  options: {\n    includePaths: ['node_modules']\n  }\n}\n```\n\nYou can override scss variables for main div id, plugin window width and background:\n```scss\n$ngCcId: 'ng-cc';\n$ngCcWidth: 28em;\n$ngCcBg: hsl(0, 0, 15);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetgen%2Fjavascript-cookie-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetgen%2Fjavascript-cookie-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetgen%2Fjavascript-cookie-control/lists"}