This document describes the setup process for the open-source version of Klaro. To get started with the hosted version, simply sign up for a plan and follow the instructions given by the installation wizard (it's easy).
Setting up Klaro on your website is easy and usually takes less than 10 minutes. All you need to do is write a small config file, load the klaro.js script and make a few small changes to your third-party scripts on your page so that Klaro can manage them. So let's get started!
1. Write the config file
First, you need to tell Klaro about the third-party apps and trackers on your site. To do this, you write a simple Javascript config. The easiest way to get started is by looking at the annotated Klaro config file, which is designed to be self-explaining. You can find more examples on the Klaro Github page.
2. Modify your third-party scripts
To make sure that no third-party scripts are loaded without consent, you need to modify your HTML code a tiny bit: For inline scripts, replace the value of the type attribute with text/plain (this keeps the browser from executing the script) and add a data attribute with the original type, e.g. data-type="application/javascript". Also add a data-name attribute that matches the name of the given app in your config, e.g. data-name="googleAnalytics".
For external script do the same, but in addition rename the src attribute to data-src (this ensures that the browser won't load the script without the consent of the user). This also works for other tags such as images or tracking pixels. Just remember to always add a data-name attribute that matches the name of the app in your config so that Klaro knows which element belongs to which app.
3. Load the config and the script
Finally, include both the config script as well as the Klaro code on your page. You can defer the loading of the scripts if you like, just make sure the config is initialized when Klaro loads. You can have a look at our examples to get some inspiration.
We also provide a version of Klaro without styles, which is handy in case you want to bring our own or customize ours. Simply download klaro-no-css.js and the minified stylesheet klaro.min.css and include both of them in your HTML. We also have an unminified klaro.css stylesheet, which is great if you want to make modifications to it. You can also look at the SCSS file.
If you want to host Klaro yourself, you can download it here.
If you encounter any difficulties when setting up Klaro or if you want to suggest a new feature or report a bug, please open a Github-Issue or get in touch with us, we love to hear from you!
Getting Started
Setting up Klaro on your website is easy and usually takes less than 10 minutes. All you need to do is write a small config file, load the
klaro.jsscript and make a few small changes to your third-party scripts on your page so that Klaro can manage them. So let's get started!1. Write the config file
First, you need to tell Klaro about the third-party apps and trackers on your site. To do this, you write a simple Javascript config. The easiest way to get started is by looking at the annotated Klaro config file, which is designed to be self-explaining. You can find more examples on the Klaro Github page.
2. Modify your third-party scripts
To make sure that no third-party scripts are loaded without consent, you need to modify your HTML code a tiny bit: For inline scripts, replace the value of the
typeattribute withtext/plain(this keeps the browser from executing the script) and add a data attribute with the original type, e.g.data-type="application/javascript". Also add adata-nameattribute that matches the name of the given app in your config, e.g.data-name="googleAnalytics".For external script do the same, but in addition rename the
srcattribute todata-src(this ensures that the browser won't load the script without the consent of the user). This also works for other tags such as images or tracking pixels. Just remember to always add adata-nameattribute that matches the name of the app in your config so that Klaro knows which element belongs to which app.3. Load the config and the script
Finally, include both the config script as well as the Klaro code on your page. You can defer the loading of the scripts if you like, just make sure the config is initialized when Klaro loads. You can have a look at our examples to get some inspiration.
We also provide a version of Klaro without styles, which is handy in case you want to bring our own or customize ours. Simply download klaro-no-css.js and the minified stylesheet klaro.min.css and include both of them in your HTML. We also have an unminified klaro.css stylesheet, which is great if you want to make modifications to it. You can also look at the SCSS file.
If you want to host Klaro yourself, you can download it here.
Problems, Questions, Suggestions?
If you encounter any difficulties when setting up Klaro or if you want to suggest a new feature or report a bug, please open a Github-Issue or get in touch with us, we love to hear from you!