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.
- Free and Open Source: No hidden fees, subscriptions or restrictions.
- Easy to use: Simply add a small JS snippet and config to your site and you're ready to go!
- Flexible and customizable: Manage consent for all possible types of third-party apps and easily customize the tool according to your needs.
- 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!
Current languages: Catalan, Croatian, Dutch, English, Finnish, French, Galician, German, Greek, Hungarian, Italian, Norwegian, Romanian, Serbian (Latin and Cyrillic), Spanish, Swedish, Turkish - Small footprint: The minified+gzipped JS is only 57 kB and contains everything that is required, including style sheets and translations.
- Intuitive and responsive: Klaro is designed to blend in with your existing design and optimized for modern desktop and mobile browsers.
- Secure and reliable: Klaro ensures that no third-party apps or trackers are executed without the consent of the user, even when JavaScript is disabled or Klaro itself gets blocked.
This is the Catloaf Software fork of Klaro. Version 0.8 modernizes the toolchain,
hardens consent handling and HTML text rendering, and preserves the browser API
and existing bundle names. See upstream documentation
for configuration guidance. This fork is distributed as @catloafsoft/klaro through
GitHub Packages and includes checked-in dist files. The upstream npm package and
CDN do not distribute this fork.
To use the widget, adapt the annotated config.js and host it alongside dist/klaro.js. Source files need compilation before they can run in the browser. Load the configuration before Klaro:
<!-- make sure the config gets loaded before Klaro -->
<script defer type="text/javascript" src="config.js"></script>
<script defer type="text/javascript" src="klaro.js"></script>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. Include your own styles or host klaro.min.css separately:
<link rel="stylesheet" href="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.
Configure the GitHub Packages registry in your project's .npmrc:
@catloafsoft:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}Set NODE_AUTH_TOKEN to a GitHub personal access token (classic) with read:packages
and access to the package, then install:
pnpm add @catloafsoft/klaro@0.8.1
Keep credentials outside source control. GitHub Actions consumers can use their
GITHUB_TOKEN when their repository has package access. See
GitHub's authentication guide.
Alternatively, install the fork directly from GitHub:
pnpm add @catloafsoft/klaro@github:catloafsoft/klaro
The package 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 '@catloafsoft/klaro'
// import Klaro without CSS
import * as klaro from '@catloafsoft/klaro/no-css'
// import the accompanying CSS (requires style-loader)
import '@catloafsoft/klaro/dist/klaro.css'
// import only the consent manager (no UI components)
import ConsentManager from '@catloafsoft/klaro/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, use Node.js 24.11 or later and the
pnpm version specified in package.json:
pnpm install
pnpm run make-dev #will run a development server
pnpm run make #will build the production version
SEPARATE_CSS=1 pnpm run make #build JS without CSS and extracted minified CSS
SEPARATE_CSS=1 NO_MINIFY_CSS=1 pnpm run make #build readable CSSIf you have an environment where make is available, you can also run
make build
After rebuilding all three bundle/CSS variants, run pnpm run release-metadata
to update the current release's SHA-384 integrity hashes. CI verifies the checked-in
bundles, package imports, browser API, and release metadata.
To publish, update package.json and releases.yml, rebuild and verify the release,
then commit the artifacts and push a tag matching the package version (for example,
v0.8.0). The Publish GitHub Package workflow runs the full verification workflow
before publishing to https://npm.pkg.github.com with its GITHUB_TOKEN, then
reads back the published version and integrity. Package visibility and consumer
repository access are managed in GitHub Packages settings.
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:
- The website on which Klaro is installed (if possible)
- The config file you're using (a link is sufficient)
- 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.)