{"id":21344453,"url":"https://github.com/freshleafmedia/privacy-banner","last_synced_at":"2025-10-08T21:41:29.376Z","repository":{"id":90140896,"uuid":"579216860","full_name":"freshleafmedia/privacy-banner","owner":"freshleafmedia","description":"A website privacy manager which forgets about cookies and focuses on good UX","archived":false,"fork":false,"pushed_at":"2025-09-10T08:31:22.000Z","size":57,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-24T08:49:36.021Z","etag":null,"topics":["cookie","cookie-banner","gdpr-consent","privacy","privacy-control","privacy-protection"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/freshleafmedia.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-12-17T00:43:45.000Z","updated_at":"2025-09-10T08:24:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"77f988e2-88c5-47ab-8e2e-cdf7f32bd0af","html_url":"https://github.com/freshleafmedia/privacy-banner","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/freshleafmedia/privacy-banner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshleafmedia%2Fprivacy-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshleafmedia%2Fprivacy-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshleafmedia%2Fprivacy-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshleafmedia%2Fprivacy-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freshleafmedia","download_url":"https://codeload.github.com/freshleafmedia/privacy-banner/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshleafmedia%2Fprivacy-banner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000706,"owners_count":26082837,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","gdpr-consent","privacy","privacy-control","privacy-protection"],"created_at":"2024-11-22T01:19:07.971Z","updated_at":"2025-10-08T21:41:29.371Z","avatar_url":"https://github.com/freshleafmedia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Privacy Control\n\nA website privacy manager which focuses on good UX, sane defaults and forgets about cookies.\n\n\n## Overview\n\nThis isn't just another generic cookie banner. The aims of this library are:\n\n- Interrupt the user as little as possible.\n- Ask for consent only when it is immediately required.\n- Provide simple and accessible UI.\n- Focus on the third parties data is sent to rather than cookies\n\n\n## Installation\n\n```\nyarn add freshleafmedia/privacy-banner\n```\n\nOnce bundled add the script to the end of the `\u003cbody\u003e` element.\n\n\n## Usage\n\n1. Declare Data Processors\n2. Banner\n3. Data Processor Scripts\n4. Opt-in Content\n\n\n### Declare Data Processors\n\nEach of the ways your site processes private data is defined as a `\u003cprivate-data-processor\u003e` element.\n\n```html\n\u003cprivate-data-processor\n    key=\"google-recaptcha\"\n    name=\"Google reCAPTCHA\"\n    description=\"Used to prevent SPAM form submissions\"\n/\u003e\n```\n\n```html\n\u003cprivate-data-processor\n    key=\"google-analytics\"\n    name=\"Google Analytics\"\n    description=\"Used to asses how the website is used by visitors\"\n    omnipresent\n/\u003e\n```\n\n- **key** - This is the value the data processor is referenced by\n- **name** - The full name of the data processor\n- **description** - What is the data processor being used for, why is it there\n- **omnipresent** - Whether the data processor is required on all pages. This is for things like analytics scripts\n\n\n\n### Banner\n\n![consent banner example](assets/banner.png)\n\nThe banner should be added once to the end of every page. If you have no `omnipresent` private-data-processors your users will never see this :tada:\n\n```html\n\u003cprivacy-banner hidden\u003e\n    \u003cprivacy-banner-message\u003e\n        This website uses cookies and third-party services which may process your personal information.\n        For more information, see our \u003ca href=\"/privacy\"\u003eprivacy policy\u003c/a\u003e.\n    \u003c/privacy-banner-message\u003e\n    \u003cprivacy-banner-actions\u003e\n        \u003cbutton class=\"optIn\"\u003eAllow all\u003c/button\u003e\n        \u003cbutton class=\"optOut\"\u003eReject non-essential\u003c/button\u003e\n    \u003c/privacy-banner-actions\u003e\n\u003c/privacy-banner\u003e\n```\n\n\n### Data Processor Scripts\n\nWhen you have scripts which will process private data they need to be replaced with `\u003cprivacy-aware-script\u003e`.\nOnce consent for that processor has been obtained the script will load like normal.\n\n```html\n\u003cprivacy-aware-script data-processor-key=\"google-recaptcha\" src=\"path/to/your/script.js\" async /\u003e\n```\n\n- **data-processor-key** - This is the key of the related processor\n- All other properties are passed directly to the `\u003cscript\u003e` when it is injected. Eg `async` `defer` etc\n\n\n### Opt-in content\n\nWhen there is content which relies on a third party to function at all (eg YouTube embed) it should be wrapped in a `privacy-overlay`:\n\n```html\n\u003cprivacy-overlay data-processor-key=\"google-recaptcha\"\u003e\n    \u003cprivacy-overlay-message\u003e\n        \u003cp\u003eThis form uses Google reCAPTCHA for spam prevention. Your permission is required to activate it as information may be shared with Google.\u003c/p\u003e\n        \n        \u003cp\u003eFor more information, please see Google's\n            \u003ca href=\"https://policies.google.com/privacy\"\u003eprivacy policy\u003c/a\u003e and\n            \u003ca href=\"https://policies.google.com/terms\"\u003eterms of service\u003c/a\u003e.\n        \u003c/p\u003e\n        \n        \u003cp\u003e\n            \u003cbutton type=\"button\"\u003eAllow reCAPTCHA and continue\u003c/button\u003e\n        \u003c/p\u003e\n    \u003c/privacy-overlay-message\u003e\n    \n    \u003cprivacy-aware-content\u003e\n        Your content here...\n    \u003c/privacy-aware-content\u003e\n\u003c/privacy-overlay\u003e\n```\n\n- **data-processor-key** - This is the key of the related data processor\n\n![Contact form with a privacy overlay asking the user for consent](assets/overlay.png)\n\n\n## Examples\n\n### Form with reCATPCHA\n\n```html\n\u003cprivacy-overlay data-processor-key=\"google-recaptcha\"\u003e\n    \u003cprivacy-overlay-message\u003e\n        \u003cp\u003eThis form uses Google reCAPTCHA for spam prevention. Your permission is required to activate it as information may be shared with Google.\u003c/p\u003e\n\n        \u003cp\u003eFor more information, please see Google's\n            \u003ca href=\"https://policies.google.com/privacy\"\u003eprivacy policy\u003c/a\u003e and\n            \u003ca href=\"https://policies.google.com/terms\"\u003eterms of service\u003c/a\u003e.\n        \u003c/p\u003e\n\n        \u003cp\u003e\n            \u003cbutton type=\"button\"\u003eAllow reCAPTCHA and continue\u003c/button\u003e\n        \u003c/p\u003e\n    \u003c/privacy-overlay-message\u003e\n\n    \u003cprivacy-aware-content\u003e\n        \u003cform\u003e\n            ...\n        \u003c/form\u003e\n    \u003c/privacy-aware-content\u003e\n\u003c/privacy-overlay\u003e\n\n\u003cprivacy-banner hidden\u003e\n    \u003cprivacy-banner-message\u003e\n        \u003cp\u003e\n            This website uses cookies and third-party services which may process your personal information.\n            For more information, see our \u003ca href=\"/privacy\"\u003eprivacy policy\u003c/a\u003e.\n        \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cprivacy-banner-actions\u003e\n        \u003cbutton class=\"optIn\"\u003eAllow all\u003c/button\u003e\n        \u003cbutton class=\"optOut\"\u003eReject non-essential\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/privacy-banner\u003e\n\n\u003cprivate-data-processor\n    key=\"google-recaptcha\"\n    name=\"Google reCAPTCHA\"\n    description=\"Used to prevent SPAM form submissions\"\n/\u003e\n\n\u003cprivacy-aware-script data-processor-key=\"google-recaptcha\" src=\"path/to/recaptcha.js\" /\u003e\n```\n\n### Google Analytics\n\n```html\n\u003cprivacy-banner hidden\u003e\n    \u003cprivacy-banner-message\u003e\n        \u003cp\u003e\n            This website uses cookies and third-party services which may process your personal information.\n            For more information, see our \u003ca href=\"/privacy\"\u003eprivacy policy\u003c/a\u003e.\n        \u003c/p\u003e\n    \u003c/privacy-banner-message\u003e\n    \u003cprivacy-banner-actions\u003e\n        \u003cbutton class=\"optIn\"\u003eAllow all\u003c/button\u003e\n        \u003cbutton class=\"optOut\"\u003eReject non-essential\u003c/button\u003e\n    \u003c/privacy-banner-actions\u003e\n\u003c/privacy-banner\u003e\n\n\n\u003cprivate-data-processor\n    key=\"google-analytics\"\n    name=\"Google Analytics\"\n    description=\"Used to asses how the website is used by visitors\"\n    omnipresent\n/\u003e\n\n\u003cscript\u003e\n    var _gaq = _gaq || [];\n    _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);\n    _gaq.push(['_trackPageview']);\n\u003c/script\u003e\n\n\u003cprivacy-aware-script data-processor-key=\"google-analytics\" src=\"https://ssl.google-analytics.com/ga.js\" /\u003e\n```\n\n\n## Styles\n\nYou may edit the text content and style all the elements however you wish.\nThe [included styles](src/styles.scss), are intentionally left plain and designed to be a good starting point.\n\n\n## How it works\n\nThe `\u003cprivacy-banner\u003e` element acts as the 'source of truth' of which data processors there are and if they are enabled.\n\nWhenever a data processor is enabled, either via the banner or an overlay, events are fired. These events are listened\nfor by all elements which can be affected. They then adjust their state accordingly.\n\n\n## License\n\nSee [LICENSE](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshleafmedia%2Fprivacy-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreshleafmedia%2Fprivacy-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshleafmedia%2Fprivacy-banner/lists"}