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
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-name attribute that matches the name of the given app in your config, e.g.
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.