Klaro [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).
Klaro supports multiple modes of asking for consent and can display third-party apps individually or grouped by purpose.
You can now find more extensive documentation on our website.
To 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 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, 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:
<!-- make sure the config gets loaded before Klaro -->
<script defer type="text/javascript" src="config.js"></script>
<script defer type="text/javascript" src="https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.js"></script>
You 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.
Do 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.
We also provide a version of Klaro without stylesheets included, which is useful in case you want to provide your own styles: klaro-no-css.js. If you use this, make sure to either include your own styles or to include klaro.min.css separetely, like this:
<link rel="stylesheet" href="https://cdn.kiprotect.com/klaro/[klaro-version]/klaro.min.css" />
We also provide a non-minified version of the stylesheet, which is great if you want to make your own version: klaro.css.
If 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:
<a class="button is-success" onclick="return klaro.show();">Change consent settings</a>
Calling 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).
To 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:
<script type="text/plain"
data-type="text/javascript"
data-name="optimizely"
data-src="https://cdn.optimizely.com/js/10196010078.js">
</script>
Klaro will then take care of executing the scripts if consent was given (you can chose to execute them before getting explicit consent as well).
The same method also works for images, stylesheets and other elements with a src or type attribute.
Klaro offers a small but powerful Javascript 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.
To 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 ConsentManagerand native functions such as getConsent(name) replacing name with the name of the service you listed in your config.
Example:
let manager = klaro.getManager();
if (manager.getConsent('hotjar')) hotjar.initialize(HOTJAR_ID);
The 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, which contains descriptions of all valid config options and parameters.
Klaro is also available as a Node.js module via npm:
npm install klaro
The npm distribution includes fully-fledged Klaro with CSS as well as the version without CSS (the CSS bundle is also included). In addition, it contains the consent management framework without the UI classes, which is handy in case you want to use your own UI classes:
// import Klaro with CSS
import * as klaro from 'klaro'
// import Klaro without CSS
import * as klaro from 'klaro/dist/klaro-no-css'
// import the accompanying CSS (requires style-loader)
import 'klaro/dist/klaro.css'
// import only the consent manager (no UI components)
import 'klaro/dist/cm'
This enables you to seamlessly integrate Klaro with your own JS projects, regardless if you use React, Vue, Angular, Mithril, Svelte or any other JS framework. Have a look at our webpack example to see a complete example.
If you want to customize Klaro or extend it, you can build it from scratch using the following commands:
npm install
npm run-script make-dev #will run a development server
npm run-script make #will build the production version
If you have an environment where make is available, you can also run
make build
To publish a new version of Klaro to NPM, simply run
make publish
To generate a new tagged release, simply run
make release [RT=patch|minor|major]
If no argument is given, a 'patch' release will be created. The release mechanism will not run if
the working directory isn't clean. If it is, a Python script will increase the version number in
the package.json file, rebuild the dist files, create a new commit and tag it with the version.
Want to contribute? We'd love that!
If you have a feature request or bug to report, please fill out a GitHub Issue to begin the conversation.
If you want to help out, but don't know where to begin, check out the open issues tagged "help wanted".
If you are multilingual, consider contributing a translation we don't have yet.
This project is licensed under a BSD-3 license. A list of third-party libraries can be found in the package.json file.
The accompanying website uses Bulma, Bootstrap and Prism and a surveillance camera image from Wikipedia.
Do 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:
klaro.version() in the JS console.)FAQs
A simple but powerful consent manager.
The npm package klaro receives a total of 5,088 weekly downloads. As such, klaro popularity was classified as popular.
We found that klaro demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.