Simple & Friendly

Klaro is simple, unobtrusive and optimized for both mobile devices and desktop browsers. Klaro disturbs your users as little as possible and helps you to process personal data in a completely transparent and legally compliant manner.

Open Source

The Klaro frontend code is licensed under the liberal BSD-3 license, which means that you can freely adapt it for commercial and non-commercial purposes. This allows you to freely customize any aspect of Klaro.

Easily customizable

Klaro can manage any third-party services and tracking scripts. New services can be added with just a few lines of code.

Data protection per design & standard

Klaro supports implicit and explicit consent processes and can ensure that no third-party applications are loaded or collect personal data without the user's consent.

Responsively compatible with more than 99.9% of browsers

Klaro works with all popular modern browsers and most older browsers (including IE9-11) and is optimized for viewing on both desktop and mobile devices.

Lightweight & fast

Klaro.js is less than 45 kB Javascript (scaled down + gzipped) and loads lightning fast, so your visitors will not notice any difference when loading your page. You can embed it via our own CDN or host it yourself on your server.

Multilingual

Klaro is easily internationalizable and allows you to add or change translations with just a few lines of code.

Hundreds of organizations are already successfully using Klaro:

Brockhaus AG, Lorch, RSA GmbH, Rohde Technics, VR Zahlungssysteme, VKA, Paper24, Cemecon, Dillinger, ...

To use Klaro, you have two options: Install and configure the open source version, or sign up for one of our paid subscriptions to get advanced server-side functionality, integration consulting, priority support and continuous monitoring. Regardless of what you choose, we will help you to use Klaro successfully!

Write the configuration file

First you need to inform Klaro about the third-party applications and trackers on your website. To do this, you write a simple Javascript configuration. The easiest way to start is to take a look at our documentation, which contains an annotated configuration file that you can modify. No rocket science, I promise. If you need more help, don't hesitate to ask our friendly Github community.

window.klaroConfig = {
    privacyPolicy: '/privacy.html',
    apps : [
        {
            name : 'google-analytics',
            default: true,
            title : 'Google Analytics',
            purposes : ['statistics'],
            cookies : [/^ga/i],
            callback : function(consent, app){
              // this is a sample callback function...
            },
        },
        // ...
    ],
}

Change your third party scripts

To ensure that tracking scripts and third-party applications are not loaded without permission, you will need to modify your HTML code a little bit: For inline scripts, replace the value of the type attribute with text/plain (this prevents the browser from running the script) and add a data attribute with the original type, e.g. data-type="application/javascript". Also add an data-name-Attribut that matches the name of the given application in your configuration, e.g. data-name="googleAnalytics". See our documentation for more detailed information.

# Inline scripts: 
<script type="text/plain"
        data-type="application/javascript"
        data-name="google-analytics">
//...
</script>

# External scripts and resources (img, link, ...): 
<script type="text/plain"
        data-src="https://analytics.kiprotect.com/matomo.js"
        data-name="matomo">
</script>

Load the configuration and the script

Finally, insert both the configuration script and the clear code on your page. You can postpone loading the scripts if you want. Just make sure that the configuration is initialized when Klaro is loaded. You can take a look at our simple example page to get an idea of how to do this. If you want to host Klaro yourself, you can download it here.

<script defer type="application/javascript"
        src="config.js"></script>
<script defer 
        data-config="klaroConfig"
        type="application/javascript"
        src="https://cdn.kiprotect.com/klaro/latest/klaro.js">
</script>

Any other questions?

Would you like to learn more about Klaro? Have a look at our documentation, visit our github page or contact us *. By the way, Klaro is pronounced [klɛro] and is a colloquial German word meaning "in Ordnung" or "understood".

* Please note: We do not offer e-mail support for the open source version. Please post all issues on Github, where our friendly community can help you.