{"id":14070224,"url":"https://github.com/wotschofsky/consent-manager","last_synced_at":"2025-07-30T07:30:57.790Z","repository":{"id":57205896,"uuid":"428060322","full_name":"wotschofsky/consent-manager","owner":"wotschofsky","description":"Comprehensive, flexible, accessible and privacy friendly cookie consent management solution for every project.","archived":false,"fork":false,"pushed_at":"2024-07-30T10:33:06.000Z","size":562,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-26T15:57:51.156Z","etag":null,"topics":["compliance","consent","cookies","gdpr","privacy"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wotschofsky.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":"2021-11-14T22:53:30.000Z","updated_at":"2024-11-19T04:02:45.000Z","dependencies_parsed_at":"2023-07-21T13:55:52.461Z","dependency_job_id":"a466d119-9694-4397-b891-19982a897894","html_url":"https://github.com/wotschofsky/consent-manager","commit_stats":null,"previous_names":["wotschofsky/consent-manager"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotschofsky%2Fconsent-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotschofsky%2Fconsent-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotschofsky%2Fconsent-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotschofsky%2Fconsent-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wotschofsky","download_url":"https://codeload.github.com/wotschofsky/consent-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228102638,"owners_count":17869893,"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":["compliance","consent","cookies","gdpr","privacy"],"created_at":"2024-08-13T07:07:34.699Z","updated_at":"2024-12-04T11:31:30.609Z","avatar_url":"https://github.com/wotschofsky.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/consent-manager)](https://www.npmjs.com/package/consent-manager)\n\n# consent-manager\n\nconsent-manager aims to provide a comprehensive, flexible, accessible and privacy friendly cookie consent management solution for every project.\nMost cookie consent management solutions are either super basic or are proprietary. Additionally they may only offer you their pre-designed UI which doesn't fit every design.\nconsent-manager allows you to only use the components you need. Anything from just the core consent management feature to the entire suite of bundled add-ons including ready-to-use UI components, integration with the DOM or blocking of cookies for any script (coming soon!) works!\n\n## Getting started\n\nAdd the script to your project through a package manager:\n\n`$ pnpm i consent-manager`\n\nor\n\n`$ yarn add consent-manager`\n\nor\n\n`$ npm i consent-manager`\n\nAlternatively you can also import the script found in the releases section on GitHub directly. If you choose this option you won't need to import the individual classes going forward - they will all be available to you automatically.\n\n```html\n\u003cscript src=\"consent-manager.min.js\"\u003e\u003c/script\u003e\n```\n\nOr include through a public CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/consent-manager@1/dist/consent-manager.min.js\"\u003e\u003c/script\u003e\n```\n\n## Core\n\nFirst create a new ConsentManager object by passing a config:\n\n```javascript\nimport ConsentManager from 'consent-manager';\n\nconst consentManager = new ConsentManager({\n  // Version of the current configuration\n  // When this changes all current consent preferences will be disregarded\n  // string - required\n  version: '2021-01-01',\n\n  // Name of the cookie containing preferences\n  // string - optional - defaults to \"consent-manager\"\n  cookieName: 'consent-manager',\n\n  // How long until cookie containing preferences expires\n  // number (days), Date object or \"session\" (until end of session) - optional - defaults to 365 days\n  expires: 365,\n\n  // Array of all toggleable categories by which cookies will be sorted; adjust to according to your needs\n  categories: [\n    {\n      // Unique identifier\n      // string - required\n      id: 'essential',\n\n      // Human understandable label\n      // string - required\n      label: 'Essential Cookies',\n\n      // Explanation of category's purpose\n      // string - required\n      description: 'Required for basic functionality',\n\n      // If required a category cannot be disabled\n      // boolean - required\n      required: true,\n    },\n    {\n      // Unique identifier\n      // string - required\n      id: 'analytics',\n\n      // Human understandable label\n      // string - required\n      label: 'Analytics Cookies',\n      description: 'Visitor statistics used to improve content',\n\n      // If required a category cannot be disabled\n      // boolean - required\n      required: false,\n\n      // Default value of category\n      // boolean - optional - defaults to false\n      default: true,\n    }\n  ]\n});\n```\n\n### Properties\n\n#### config\n\n```javascript\nconsentManager.config\n\n// Example: see object initialization above\n```\n\n#### grants\n\nKey-value pairs of category ids and their current status indicated as boolean.\n\n```javascript\nconsentManager.grants\n\n// Example:\n// {\n//   \"essential\": true\n//   \"analytics\": false\n// }\n```\n\n#### isCustomized\n\nBoolean indicating whether the preferences were customized by the user.\n\n```javascript\nconsentManager.isCustomized\n```\n\n### Methods\n\n#### setGrant\n\nModify current status of one or multiple categories.\n\n```javascript\nconsentManager.setGrant(categoryId, status);\n\n// Example - single category:\nconsentManager.setGrant('analytics', true);\n\n// Example - all not required categories:\nconsentManager.setGrant('*', false);\n```\n\n#### on\n\nListen for events. Available events:\n\n* `grant` (category was granted)\n* `revoke` (category was revoked)\n* `update` (category was either granted or revoked)\n\n```javascript\nconsentManager.on(eventType, callback);\n\n// Example\nconsentManager.on('update', (id) =\u003e {\n  console.log(`Category ${id} was changed!`);\n});\n```\n\n#### off\n\nRemove event listener. Make sure to pass the exact same function reference as when creating the listener.\n\n```javascript\nconsentManager.off(eventType, callback);\n\n// Example\nconsentManager.off('update', updateListener);\n```\n\n## DOMConnector\n\nDOMConnector allows you to modify the DOM based on user preferences without writing any custom logic by providing a set of *data-* attributes.\n\n### Initialization\n\n```javascript\nimport { DOMConnector } from 'consent-manager';\n\nnew DOMConnector(consentManager);\n```\n\n### Attributes\n\n`data-consent-manager` - Required to make DOMConnector aware of element\n\n`data-cm-categories=\"category1, category2\"` - Comma separated list of enabling categories\n\n`data-cm-inverted` - Inverts granted status\n\n`data-cm-attribute=\"name\"` - Attribute which will be set when enabled\n\n`data-cm-value=\"value\"` - Value of the attribute\n\n### Usage Examples\n\n#### Load script conditionally\n\n```html\n\u003cscript\n  data-consent-manager\n  data-cm-categories=\"analytics\"\n  data-cm-attribute=\"src\"\n  data-cm-value=\"https://analytics-provider.com/script.js\"\n\u003e\u003c/script\u003e\n```\n\n#### Show info text if consent not given\n\n```html\n\u003cstyle\u003e\n  p {\n    display: none;\n  }\n\u003c/style\u003e\n\n\u003cp\n  data-consent-manager\n  data-cm-categories=\"experience\"\n  data-cm-inverted\n  data-cm-attribute=\"style\"\n  data-cm-value=\"display: block;\"\n\u003e\n  Please consent to the use of cookies to use this feature!\n\u003c/p\u003e\n```\n\n## GrantsInterface\n\nGrantsInterface provides ready-made UI elements for your users to set their preferences.\n\n### Usage\n\nYou already get the entire functionality just by creating a GrantsInterface object including a cookie banner that only shows up until users set their preferences and a modal where users can customize their preferences in detail. Make sure to also include the stylesheet or create your own one.\n\n```javascript\nimport { GrantsInterface } from 'consent-manager';\nimport 'consent-manager/dist/consent-manager.css';\n\nnew GrantsInterface(consentManager);\n```\n\nInclude the stylesheet through a public CDN:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/consent-manager@1/dist/consent-manager.min.css\"\u003e\n```\n\nIf you want more control over the behavior of the UI elements you can disable them being shown automatically and use the following methods to control them manually instead:\n\n```javascript\nconst gi = new GrantsInterface(consentManager, { autoShow: false });\n\n// Show cookie banner\ngi.showBanner();\n\n// Hide cookie banner\ngi.hideBanner();\n\n// Show preferences modal\ngi.showModal();\n\n// Hide preferences modal\ngi.hideModal();\n```\n\nAdditionally you may want to customize the text values shown in interface. You can change as many or as few as you'd like and simply leave the others unspecified:\n\n```javascript\nnew GrantsInterface(consentManager, {\n  languageStrings: {\n    banner: {\n      infoText: 'This website uses cookies to ensure you get the best experience on our website.',\n      accept: 'Accept All',\n      reject: 'Only required',\n      options: 'More options'\n    },\n    modal: {\n      title: 'Consent options',\n      accept: 'Accept All',\n      reject: 'Only required'\n    }\n  }\n});\n```\n\nIf you want to use the consent table used in the modal you can generate one yourself using `generateConsentTable`:\n\n```javascript\n// Generate table element linked to ConsentManager\nconst table = gi.generateConsentTable();\n\n// Generate table element linked to ConsentManager that updates when preferences change elsewhere\nconst table = gi.generateConsentTable(true);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotschofsky%2Fconsent-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwotschofsky%2Fconsent-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotschofsky%2Fconsent-manager/lists"}