{"id":26741416,"url":"https://github.com/kiprotect/klaro","last_synced_at":"2025-05-13T12:50:54.690Z","repository":{"id":33740641,"uuid":"134984912","full_name":"kiprotect/klaro","owner":"kiprotect","description":"Klaro Privacy Manager. An open-source, privacy-friendly \u0026 compliant consent manager for your website.","archived":false,"fork":false,"pushed_at":"2025-03-27T13:59:10.000Z","size":14520,"stargazers_count":1267,"open_issues_count":147,"forks_count":264,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-20T13:09:20.978Z","etag":null,"topics":["ccpa","cmp","consent","consent-management","consent-management-platform","consent-manager","cookie","cookie-consent","dsgvo","eprivacy","gdpr","javascript","klaro","react","trackers","user-consents"],"latest_commit_sha":null,"homepage":"https://klaro.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiprotect.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":"2018-05-26T18:17:30.000Z","updated_at":"2025-04-18T11:01:20.000Z","dependencies_parsed_at":"2023-02-12T21:30:53.268Z","dependency_job_id":"7dee1f0d-99a1-41b1-9967-ea2962831d70","html_url":"https://github.com/kiprotect/klaro","commit_stats":null,"previous_names":["kiprotect/klaro","klaro-org/klaro-js","klaro-org/privacy-manager","klarohq/klaro","klarohq/klaro-js"],"tags_count":112,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiprotect%2Fklaro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiprotect%2Fklaro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiprotect%2Fklaro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiprotect%2Fklaro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiprotect","download_url":"https://codeload.github.com/kiprotect/klaro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253947429,"owners_count":21988937,"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":["ccpa","cmp","consent","consent-management","consent-management-platform","consent-manager","cookie","cookie-consent","dsgvo","eprivacy","gdpr","javascript","klaro","react","trackers","user-consents"],"created_at":"2025-03-28T06:01:10.143Z","updated_at":"2025-05-13T12:50:54.631Z","avatar_url":"https://github.com/kiprotect.png","language":"JavaScript","readme":"# Klaro! A Simple Consent Manager\n\nKlaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"dist/assets/screenshot.png\" width=300/\u003e\n    \u003cimg src=\"dist/assets/screenshot-details.png\" width=300/\u003e\n\u003c/p\u003e\n\nKlaro supports multiple modes of asking for consent and can display third-party apps individually or grouped\nby purpose.\n\n## Advantages\n\n* **Free and Open Source**: No hidden fees, subscriptions or restrictions.\n* **Easy to use**: Simply add a small JS snippet and config to your site and\n  you're ready to go!\n* **Flexible and customizable**: Manage consent for all possible types of\n  third-party apps and easily customize the tool according to your needs.\n* **Multilingual**: Full internationalization support, with languages included out of the box. New translations can be added in just a few lines of code. Contributions welcome!\\\nCurrent languages: Catalan, Croatian, Dutch, English, Finnish, French, Galician, German, Greek, Hungarian, Italian, Norwegian, Romanian, Serbian (Latin and Cyrillic), Spanish, Swedish, Turkish\n* **Small footprint**: The minified+gzipped JS is only 57 kB and contains\n  everything that is required, including style sheets and translations.\n* **Intuitive and responsive**: Klaro is designed to blend in with\n  your existing design and optimized for modern desktop and mobile browsers.\n* **Secure and reliable**: Klaro ensures that no third-party apps or\n  trackers are executed without the consent of the user, even when\n  JavaScript is disabled or Klaro itself gets blocked.\n\n## Getting started\n\n**You can now find more extensive documentation on [our website](https://heyklaro.com/docs/).**\n\nTo use the widget on your website, simply embed Klaro as well as a valid config. You can have a look at the [annotated config.js](dist/config.js) to see how it works. If you want to self-host Klaro you can download compiled JS files from the `dist` folder of this repository, or go to [our website](https://kiprotect.com/docs/klaro/releases), where you can find a full list of past Klaro releases. **Do not use the `klaro.js` file from the `src` folder, it will not work in the browser as it's an  ES6 module and needs to be transpiled first (for most browsers at least).** Follow the instructions below to adapt the config to your needs and then include the two files in your website like this:\n```html\n\u003c!-- make sure the config gets loaded before Klaro --\u003e\n\u003cscript defer type=\"text/javascript\" src=\"config.js\"\u003e\u003c/script\u003e\n\u003cscript defer type=\"text/javascript\" src=\"https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.js\"\u003e\u003c/script\u003e\n\n```\n\nYou should replace `[klaro-version]` with a version number (e.g. `v0.5.30`) to download a specific version of Klaro. **Important:** We no longer update  `latest` version tag in the CDN as loading Klaro from it might lead to breaking your installation when new major or minor versions are published. We will soon replace the tag with minor version tags (e.g. `0.7`) that will receive automated security upgrades and bugfixes and can be safely used to embed Klaro without risking breaking changes.\n\nDo not forget to change your existing apps/trackers as outlined in the next section as well, so that Klaro can manage them. By default, Klaro will automatically open once the page is fully loaded.\n\nWe also provide a version of Klaro without stylesheets included, which is useful\nin case you want to provide your own styles: [klaro-no-css.js](https://cdn.kiprotect.com/klaro/[klaro-version]/klaro-no-css.js). If you use this, make sure to either include your own styles or to include [klaro.min.css](https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.min.css) separetely, like this:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.min.css\" /\u003e\n```\n\nWe also provide a non-minified version of the stylesheet, which is great if you\nwant to make your own version: [klaro.css](https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.css).\n\nIf you wish to open the consent manager manually on user interaction (for example through a link in the privacy policy), you can simply call ```klaro.show()``` via Javascript. Example:\n```html\n\u003ca class=\"button is-success\" onclick=\"return klaro.show();\"\u003eChange consent settings\u003c/a\u003e\n```\n\nCalling ```klaro.show(undefined, true)``` will force the modal to open, even if the user hasn't made a consent choice yet (by default, the consent notice would open first).\n\n## Managing third-party apps/trackers\n\nTo manage third-party scripts and ensure they only run if the user consents with their use, you simply replace the `src` attribute with `data-src`, change the `type` attribute to `text/plain` and add a `data-type` attribute with the original type, and add a `data-name` field that matches the name of the app as given in your config file. Example:\n```html\n\u003cscript type=\"text/plain\"\n    data-type=\"text/javascript\"\n    data-name=\"optimizely\"\n    data-src=\"https://cdn.optimizely.com/js/10196010078.js\"\u003e\n\u003c/script\u003e\n```\nKlaro will then take care of executing the scripts if consent was given (you can chose to execute them before getting explicit consent as well).\n\nThe same method also works for images, stylesheets and other elements with a `src` or `type` attribute.\n\n## Managing third-party modules and libraries through Javascript API\n\nKlaro offers a small but powerful [Javascript API](https://heyklaro.com/docs/api/js_api/) that allows you to control and monitor consent from your own apps. When loaded as an ordinary script, the API can be accessed via the global klaro project.\n\nTo manage third-party modules and libraries available within your app and ensure they only run if the user consents with their use, you can use the `klaro ConsentManager`and native functions such as `getConsent(name)` replacing `name` with the name of the service you listed in your config.\n\nExample:\n```js\nlet manager = klaro.getManager();\nif (manager.getConsent('hotjar')) hotjar.initialize(HOTJAR_ID);\n```\n\n### Configuration file\n\nThe consent manager is configured using a config dictionary, which you typically define in a separate JS file. To learn more, simply read the [annotated example config](dist/config.js), which contains descriptions of all valid config options and parameters.\n\n## Using Klaro via NPM\n\nKlaro is also available as a Node.js module via npm:\n\n    npm install klaro\n\nThe npm distribution includes fully-fledged Klaro with CSS as well as the version without CSS (the CSS\nbundle is also included). In addition, it contains the consent management framework without the UI classes,\nwhich is handy in case you want to use your own UI classes:\n\n```js\n// import Klaro with CSS\nimport * as klaro from 'klaro'\n\n// import Klaro without CSS\nimport * as klaro from 'klaro/dist/klaro-no-css'\n\n// import the accompanying CSS (requires style-loader)\nimport 'klaro/dist/klaro.css'\n\n// import only the consent manager (no UI components)\nimport 'klaro/dist/cm'\n```\n\nThis enables you to seamlessly integrate Klaro with your own JS projects, regardless if you use React, Vue,\nAngular, Mithril, Svelte or any other JS framework. Have a look at [our webpack example](examples/klaro-and-webpack)\nto see a complete example.\n\n## Building Klaro from scratch\n\nIf you want to customize Klaro or extend it, you can build it from scratch using the following commands:\n```sh\nnpm install\nnpm run-script make-dev #will run a development server\nnpm run-script make #will build the production version\n```\n\nIf you have an environment where `make` is available, you can also run\n\n    make build \n\n## Maintainers\n\nTo publish a new version of Klaro to NPM, simply run\n\n    make publish\n\nTo generate a new tagged release, simply run\n\n    make release [RT=patch|minor|major]\n\nIf no argument is given, a 'patch' release will be created. The release mechanism will not run if\nthe working directory isn't clean. If it is, a Python script will increase the version number in\nthe `package.json` file, rebuild the `dist` files, create a new commit and tag it with the version.\n\n## Contributing\n\nWant to contribute? We'd love that!\n\nIf you have a feature request or bug to report, please fill out [a GitHub Issue](https://github.com/KIProtect/klaro/issues) to begin the conversation.\n\nIf you want to help out, but don't know where to begin, check out [the open issues tagged \"help wanted\"](https://github.com/KIProtect/klaro/labels/help%20wanted).\n\nIf you are multilingual, consider contributing a translation we don't have yet.\n\n## License \u0026 third-party libraries\n\nThis project is licensed under a BSD-3 license. A list of third-party libraries can be found in the [package.json](package.json) file.\n\nThe accompanying website uses [Bulma](https://bulma.io), [Bootstrap](https://getbootstrap.com) and [Prism](http://prismjs.com/) and a [surveillance camera image](https://upload.wikimedia.org/wikipedia/commons/5/56/Surveillance-camera.png) from Wikipedia.\n\n## Troubleshooting\n\nDo you have problems using Klaro? If so, we want to know it! Just open an issue here and if possible provide the following information to us:\n\n* The website on which Klaro is installed (if possible)\n* The config file you're using (a link is sufficient)\n* The version of Klaro that you're using (you can get this by opening the developer tools of your browser, going to the \"Console\" tab and typing `klaro.version()` in the JS console.)\n","funding_links":[],"categories":["JavaScript","Awesome Privacy Engineering [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)"],"sub_categories":["Data Deletion, Data Mapping, and Data Subject Access Requests"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiprotect%2Fklaro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiprotect%2Fklaro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiprotect%2Fklaro/lists"}