632 Zeilen
		
	
	
	
		
			31 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			632 Zeilen
		
	
	
	
		
			31 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="EN-US">
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta charset="utf-8">
 | 
						|
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 | 
						|
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
						|
    <title>Klaro! Consent Manager Utility</title>
 | 
						|
    <link rel="stylesheet" href="assets/bulma.min.css" />
 | 
						|
    <link rel="stylesheet" href="assets/prism.css" />
 | 
						|
    <link data-name="googleFonts" data-href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
 | 
						|
    <script defer type="application/javascript" src="assets/bulma.js"></script>
 | 
						|
    <script defer type="application/javascript" src="assets/prism.js"></script>
 | 
						|
    <script defer type="application/javascript" src="config.js"></script>
 | 
						|
    <script defer type="application/javascript" src="configs/i18n.js"></script>
 | 
						|
    <script defer type="application/javascript" src="klaro.js" data-config="klaroConfig" data-style-prefix="klaro">
 | 
						|
    </script>
 | 
						|
    <script type="text/plain" data-src="examples/tracker.js" data-type="application/javascript" data-name="externalTracker" onload="onLoadExternalTracker()">
 | 
						|
    </script>
 | 
						|
    <script type="text/javascript">
 | 
						|
        function onLoadExternalTracker(){
 | 
						|
            console.debug("External tracker loaded!")
 | 
						|
        }
 | 
						|
        function showKlaro(config, modal){
 | 
						|
            var element = document.getElementById("klaro").children[0];
 | 
						|
            if (element !== undefined){
 | 
						|
                if (element.classList !== undefined)
 | 
						|
                    element.classList.add("wiggle")
 | 
						|
                else // IE9!
 | 
						|
                    element.className += " wiggle"
 | 
						|
                setTimeout(function(){
 | 
						|
                    if (element.classList !== undefined)
 | 
						|
                        element.classList.remove("wiggle")
 | 
						|
                    else { //IE9!
 | 
						|
                        var classes = element.className.split(" ")
 | 
						|
                        var newClasses = []
 | 
						|
                        for(var i=0;i<classes.length;i++){
 | 
						|
                            if (classes[i] == "wiggle")
 | 
						|
                                continue
 | 
						|
                            newClasses.push(classes[i])
 | 
						|
                        }
 | 
						|
                        element.className = newClasses.join(" ")
 | 
						|
                    }}, 1000)
 | 
						|
            }
 | 
						|
            return klaro.show(config, modal);
 | 
						|
        }
 | 
						|
        window.addEventListener("DOMContentLoaded", function(e){
 | 
						|
 | 
						|
            // we download the version list from the CDN
 | 
						|
            var request = new XMLHttpRequest();
 | 
						|
            request.addEventListener("load", function(e){
 | 
						|
                var versions = JSON.parse(e.target.response).sort(function(a,b){
 | 
						|
                    if (a.name == "latest")return -1;
 | 
						|
                    var regex = /^v(\d+)\.(\d+)\.(\d+)$/
 | 
						|
                    var matchA = regex.exec(a.name);
 | 
						|
                    var matchB = regex.exec(b.name);
 | 
						|
                    if (matchA === null || matchB === null)
 | 
						|
                        return 0;
 | 
						|
                    var dMajor = parseInt(matchA[1]) - parseInt(matchB[1])
 | 
						|
                    if (dMajor != 0)
 | 
						|
                        return -dMajor;
 | 
						|
                    var dMinor = parseInt(matchA[2]) - parseInt(matchB[2])
 | 
						|
                    if (dMinor != 0)
 | 
						|
                        return -dMinor;
 | 
						|
                    var dPatch = parseInt(matchA[3]) - parseInt(matchB[3])
 | 
						|
                    if (dPatch != 0)
 | 
						|
                        return -dPatch;
 | 
						|
                    return 0;
 | 
						|
                });
 | 
						|
                for(var i=0;i<versions.length;i++){
 | 
						|
                    var option = document.createElement('option', {value: versions[i].name});
 | 
						|
                    option.innerHTML = versions[i].name;
 | 
						|
                    versionSelect.appendChild(option);
 | 
						|
                }
 | 
						|
            });
 | 
						|
            request.open("GET", "https://cdn.kiprotect.com/klaro");
 | 
						|
            request.send();
 | 
						|
 | 
						|
 | 
						|
            var elements = document.getElementsByClassName("klaro-version");
 | 
						|
            for(var i=0;i<elements.length;i++){
 | 
						|
                elements[i].innerHTML = klaro.version();
 | 
						|
            }
 | 
						|
 | 
						|
            var translations = klaro.defaultTranslations;
 | 
						|
            var langs = Array.from(translations.keys());
 | 
						|
            for(var i=0;i<langs.length;i++){
 | 
						|
                var lang = langs[i];
 | 
						|
                var option = document.createElement('option', {value: lang});
 | 
						|
                option.innerHTML = lang;
 | 
						|
                languageSelect.appendChild(option);
 | 
						|
            }
 | 
						|
        })
 | 
						|
    </script>
 | 
						|
    <script type="text/plain" data-type="application/javascript" data-name="inlineTracker">
 | 
						|
 | 
						|
        console.debug("This is an example of an inline tracking script.")
 | 
						|
 | 
						|
            function setCookie(name, value, days) {
 | 
						|
                var expires = "";
 | 
						|
                if (days) {
 | 
						|
                    var date = new Date();
 | 
						|
                    date.setTime(date.getTime() + (days*24*60*60*1000));
 | 
						|
                    expires = "; expires=" + date.toUTCString();
 | 
						|
                }
 | 
						|
                document.cookie = name + "=" + (value || "")  + expires + "; path=/";
 | 
						|
            }
 | 
						|
 | 
						|
            //we set a tracking cookie as an example
 | 
						|
            setCookie("inline-tracker", "foo", 120)
 | 
						|
 | 
						|
        </script>
 | 
						|
    <link rel="stylesheet" href="assets/styles.css" />
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
    <!-- by default, klaro will be appended in the klaro div, or will create one at the end of the body if none exists.
 | 
						|
        it's recommended to have klaro at the top of your content so that screen reader users can be notified early -->
 | 
						|
    <div id="klaro"></div>
 | 
						|
    <img data-hide=true data-title="We're watching you (for your own safety)" class="camera"
 | 
						|
        data-src="assets/Surveillance-camera-small.png" data-name="camera" />
 | 
						|
    <section class="hero is-info is-medium is-bold">
 | 
						|
        <div class="hero-head">
 | 
						|
            <nav class="navbar">
 | 
						|
                <div class="container">
 | 
						|
                    <div class="navbar-brand">
 | 
						|
                        <a class="navbar-item" href="../">
 | 
						|
                            Klaro!
 | 
						|
                        </a>
 | 
						|
                        <span class="navbar-burger burger" data-target="navbarMenu">
 | 
						|
                            <span></span>
 | 
						|
                            <span></span>
 | 
						|
                            <span></span>
 | 
						|
                        </span>
 | 
						|
                    </div>
 | 
						|
                    <div id="navbarMenu" class="navbar-menu">
 | 
						|
                        <div class="navbar-end">
 | 
						|
                            <div class="tabs is-right">
 | 
						|
                                <ul>
 | 
						|
                                    <li><a href="#features">Features</a></li>
 | 
						|
                                    <li><a href="#getting-started">Getting Started</a></li>
 | 
						|
                                    <li><a href="#help">Help</a></li>
 | 
						|
                                </ul>
 | 
						|
                                <span class="navbar-item">
 | 
						|
                                    <a class="button is-white is-outlined" href="https://github.com/KIProtect/klaro">
 | 
						|
                                        <span>View on GitHub</span>
 | 
						|
                                    </a>
 | 
						|
                                </span>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </nav>
 | 
						|
        </div>
 | 
						|
        <div class="hero-body">
 | 
						|
            <div class="container has-text-centered">
 | 
						|
                <h1 class="title">
 | 
						|
                    <u>Klaro!</u> Simple and user-friendly consent manager.
 | 
						|
                </h1>
 | 
						|
                <h2 class="subtitle">
 | 
						|
                    Klaro is a free & open-source tool that provides
 | 
						|
                    an intuitive, user-friendly and compliant way to manage
 | 
						|
                    consent on your website. Klaro is easy to use and configure,
 | 
						|
                    lightweight and compatible with all modern browsers.
 | 
						|
                </h2>
 | 
						|
                <p>
 | 
						|
                    <a class="button is-success" onClick="return showKlaro(undefined, true);">Show manager</a>
 | 
						|
                    <a class="button is-warning" onClick="klaro.getManager().resetConsents();showKlaro(undefined, false)">Reset
 | 
						|
                        consent</a>
 | 
						|
                </p>
 | 
						|
                <p>
 | 
						|
                    <img class="screenshot" src="assets/klaro-screenshot-cut.png" />
 | 
						|
                </p>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </section>
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container features">
 | 
						|
            <a name="features"></a>
 | 
						|
            <div class="columns">
 | 
						|
                <div class="column is-4 column-eq">
 | 
						|
                    <div class="card">
 | 
						|
                        <div class="card-content">
 | 
						|
                            <p class="title">
 | 
						|
                                Simple & User-Friendly
 | 
						|
                            </p>
 | 
						|
                            <div class="content">
 | 
						|
                                <p>
 | 
						|
                                    Klaro is simple, unobtrusive and
 | 
						|
                                    optimized for mobile as well as
 | 
						|
                                    desktop browsers. It tries to stay
 | 
						|
                                    out of the way while helping you to
 | 
						|
                                    be fully transparent and compliant.
 | 
						|
                                </p>
 | 
						|
                            </div>
 | 
						|
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="column is-4 column-eq">
 | 
						|
                    <div class="card">
 | 
						|
                        <div class="card-content">
 | 
						|
                            <p class="title">
 | 
						|
                                Open Source
 | 
						|
                            </p>
 | 
						|
                            <div class="content">
 | 
						|
                                <p>
 | 
						|
                                    Klaro is licensed under a permissive
 | 
						|
                                    <strong>BSD-3</strong> license, which
 | 
						|
                                    means that you can use it freely for
 | 
						|
                                    commercial and non-commercial purposes.
 | 
						|
                                    No hidden fees or restrictions.
 | 
						|
                                </p>
 | 
						|
                            </div>
 | 
						|
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="column is-4 column-eq">
 | 
						|
                    <div class="card">
 | 
						|
                        <div class="card-content">
 | 
						|
                            <p class="title">
 | 
						|
                                Easy to Customize
 | 
						|
                            </p>
 | 
						|
                            <div class="content">
 | 
						|
                                <p>
 | 
						|
                                    Klaro can manage both inline and
 | 
						|
                                    external scripts as well as static
 | 
						|
                                    tracking elements like images or
 | 
						|
                                    stylesheet links. New apps can be added
 | 
						|
                                    with just a few lines of code.
 | 
						|
                                </p>
 | 
						|
                            </div>
 | 
						|
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
 | 
						|
        </div>
 | 
						|
 | 
						|
    </section>
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container questions">
 | 
						|
            <h1 class="subtitle"><a name="more-features">More features</a></h1>
 | 
						|
            <div class="columns">
 | 
						|
                <div class="column is-6">
 | 
						|
                    <div class="content">
 | 
						|
                        <ul>
 | 
						|
                            <li>
 | 
						|
                                <strong>Privacy by design & default</strong>: Klaro
 | 
						|
                                supports implicit and explicit (our favorite!) modes of consent and can
 | 
						|
                                make sure that no third-party apps are loaded without the
 | 
						|
                                consent of the user.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Smart change detection</strong>: Klaro automatically detects
 | 
						|
                                config changes and will renew consent whenever you add a new app
 | 
						|
                                for which the user didn't give consent yet.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Multilingual</strong>: Klaro has full support for
 | 
						|
                                internationalization and makes it easy to add or modify translations
 | 
						|
                                with just a few lines of code:
 | 
						|
                                <span style="display: block; background: #eee; padding: 14px; border: 1px solid #ccc; margin-top: 10px;">
 | 
						|
                                    Show consent manager in
 | 
						|
                                    <div class="select is-small" onChange="klaroI18nConfig.lang = languageSelect.value;klaro.getManager(klaroI18nConfig).resetConsents();showKlaro(klaroI18nConfig, true);return false;">
 | 
						|
                                        <select id="languageSelect" class="select" name="lang">
 | 
						|
                                            <option value="">please select</option>
 | 
						|
                                        </select>
 | 
						|
                                    </div>
 | 
						|
                                </span>
 | 
						|
                            </li>
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="column is-6">
 | 
						|
                    <div class="content">
 | 
						|
                        <ul>
 | 
						|
                            <li>
 | 
						|
                                <strong>Mobile-friendly and compatible with all modern browsers</strong>: Klaro
 | 
						|
                                works with all major browsers and is optimized for both desktop
 | 
						|
                                and mobile clients.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Lightweight & fast</strong>: Klaro.js is less than 20 kB
 | 
						|
                                of Javascript (minified + gzipped) and is lightning-fast so that your
 | 
						|
                                users won't notice any difference when using it.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Easy to customize</strong>: Klaro lets you change
 | 
						|
                                the stylesheet to better match your own design and lets you
 | 
						|
                                access its functionality via Javascript as well.
 | 
						|
                            </li>
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </section>
 | 
						|
 | 
						|
    <hr />
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container getting-started">
 | 
						|
            <h1 class="title"><a name="getting-started">Getting Started</a></h1>
 | 
						|
            <div class="content">
 | 
						|
                <p>
 | 
						|
                    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 <code>klaro.js</code> script and make
 | 
						|
                    a few small changes to your third-party/tracking scripts on your page
 | 
						|
                    so that Klaro can manage them.
 | 
						|
                    <strong>Let's get started!</strong>
 | 
						|
                </p>
 | 
						|
            </div>
 | 
						|
            <h2 class="subtitle">Write the config file (no worries, it's easy)</h2>
 | 
						|
            <div class="columns">
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <pre><code class="language-javascript">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 an example callback function...
 | 
						|
            },
 | 
						|
        },
 | 
						|
        //...
 | 
						|
    ],
 | 
						|
}</code></pre>
 | 
						|
                </div>
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <div class="content">
 | 
						|
                        <p class="lead">
 | 
						|
                            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 config file used for this site
 | 
						|
                            and simply modify it according to your needs.
 | 
						|
                            No rocket science involved, promised. There are some
 | 
						|
                            <a href="https://github.com/KIProtect/klaro/blob/master/dist/configs/">more examples</a> on
 | 
						|
                            Github as well.
 | 
						|
                        </p>
 | 
						|
                        <p>
 | 
						|
                            <a href="config.js" class="button is-warning">
 | 
						|
                                View example config
 | 
						|
                            </a>
 | 
						|
                        </p>
 | 
						|
                        <article class="message is-info">
 | 
						|
                            <div class="message-body">
 | 
						|
                                <strong>Stay tuned:</strong> We're working on an
 | 
						|
                                online configuration editor that will allow you
 | 
						|
                                to edit and download a config file without writing
 | 
						|
                                a single line of code!
 | 
						|
                            </div>
 | 
						|
                        </article>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
 | 
						|
            <h2 class="subtitle">Modify your third-party/tracking scripts (just a little bit)</h2>
 | 
						|
            <div class="columns">
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <pre><code class="language-javascript" data-name="google-analytics"># 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.7scientists.com/matomo.js"
 | 
						|
        data-name="matomo">
 | 
						|
</script>
 | 
						|
</code></pre>
 | 
						|
                </div>
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <div class="content">
 | 
						|
                        <p>
 | 
						|
                            To make sure that no tracking scripts and third-party apps are
 | 
						|
                            loaded without consent, you need to modify your HTML code a tiny bit:
 | 
						|
                            For inline scripts, replace the value of the <code>type</code> attribute with
 | 
						|
                            <code>text/plain</code> (this keeps the browser from executing the script)
 | 
						|
                            and add a data attribute with the original type,
 | 
						|
                            e.g. <code>data-type="application/javascript"</code>. Also add a <code>data-name</code>
 | 
						|
                            attribute that matches the name of the given app in your config,
 | 
						|
                            e.g. <code>data-name="googleAnalytics"</code>.
 | 
						|
                        </p>
 | 
						|
                        <p>
 | 
						|
                            For external script do the same, but in addition rename the <code>src</code>
 | 
						|
                            attribute to <code>data-src</code> (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/tracking pixels. Just remember to always add a <code>data-name</code>
 | 
						|
                            attribute that matches the name of the app in your config
 | 
						|
                            so that Klaro knows which element belongs to which app.
 | 
						|
                        </p>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
 | 
						|
            <h2 class="subtitle">Load the config and the script (last step, promised)</h2>
 | 
						|
            <div class="columns">
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <pre><code class="language-javascript"><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></code></pre>
 | 
						|
                </div>
 | 
						|
                <div class="column is-6 column-eq">
 | 
						|
                    <div class="content">
 | 
						|
                        <p>
 | 
						|
                            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 <a href="examples/simple.html">simple example page</a>
 | 
						|
                            to get an idea of how to do this.
 | 
						|
                        </p>
 | 
						|
                        <p>
 | 
						|
                            <a id="no-css">Unstyled Klaro:</a> 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 <a href="klaro-no-css.js" download>klaro-no-css.js</a>
 | 
						|
                            and the minified stylesheet <a href="klaro.min.css" download>klaro.min.css</a> and include both
 | 
						|
                            of them in your HTML.
 | 
						|
                            We also have an unminified <a href="klaro.css" download>klaro.css</a> stylesheet, which is
 | 
						|
                            great if you want to make modifications to it. You can also look at
 | 
						|
                            the <a href="https://github.com/KIProtect/klaro/blob/master/src/scss/klaro.scss">SCSS file</a>.
 | 
						|
                        </p>
 | 
						|
                        <p>
 | 
						|
                            If you want to host Klaro yourself, you can download it here.
 | 
						|
                            <div style="display:inline-block">
 | 
						|
                                <a id="versionLink" href="https://cdn.kiprotect.com/klaro/latest/klaro.js" download class="button is-warning">
 | 
						|
                                    Download klaro.js
 | 
						|
                                </a>
 | 
						|
                                <div class="select">
 | 
						|
                                    <select onChange="versionLink.href='https://cdn.kiprotect.com/klaro/'+versionSelect.value+'/klaro.js'" id="versionSelect" class="select" name="klaro-version">
 | 
						|
                                    </select>
 | 
						|
                                </div>
 | 
						|
                            </div>
 | 
						|
                        </p>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
 | 
						|
        </div>
 | 
						|
 | 
						|
    </section>
 | 
						|
 | 
						|
    <hr />
 | 
						|
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container questions">
 | 
						|
            <h1 class="subtitle"><a name="advanced-config">Advanced Configuration</a></h1>
 | 
						|
            <div class="columns is-multiline">
 | 
						|
                <div class="column is-12">
 | 
						|
                    <iframe width="560" height="315" data-name="youtube" data-style="dark" data-id="rick-astley" data-src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 | 
						|
                    <h3>Rick Time!</h3>
 | 
						|
                    <h3>You should follow us!</h3>
 | 
						|
                    <div data-name="twitter">
 | 
						|
                        <a href="https://twitter.com/kiprotect?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @kiprotect</a>
 | 
						|
                    </div>
 | 
						|
                    <script data-type="application/javascript" async data-name="twitter" data-src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 | 
						|
                </div>
 | 
						|
                <div class="column is-6">
 | 
						|
                    <div class="content">
 | 
						|
                        <ul>
 | 
						|
                            <li>
 | 
						|
                                <strong>Customizing texts and translations</strong>: You can
 | 
						|
                                overwrite default translations and add your own if you like.
 | 
						|
                                As an example, check out <a
 | 
						|
                                    href="https://github.com/KIProtect/klaro/blob/master/dist/configs/i18n.js">this
 | 
						|
                                    config file</a>.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Opening Klaro via a link</strong>: To allow you users
 | 
						|
                                to review and customize their consent decisions, you will need
 | 
						|
                                to let them open the Klaro manager on demand. You can do this
 | 
						|
                                by calling the <code>show</code> function of the Klaro library, e.g.
 | 
						|
                                like this: <code><a onClick="klaro.show();return false;">manage your
 | 
						|
                                    consents</a></code>.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Accessing the consent manager</strong>: You can access
 | 
						|
                                the consent manager via Javascript by using the <code>klaro.getManager(config)</code>
 | 
						|
                                function. Please not that currently the manager class does not
 | 
						|
                                notify the user interface of changes (yet), so make sure to call
 | 
						|
                                <code>klaro.show(config)</code> to update the UI after making
 | 
						|
                                changes to the consent configuration.
 | 
						|
                            </li>
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="column is-6">
 | 
						|
                    <div class="content">
 | 
						|
                        <ul>
 | 
						|
                            <li>
 | 
						|
                                <strong>Managing cookies</strong>: Klaro can automatically delete
 | 
						|
                                third-party cookies for you when the user withdraws consent. To
 | 
						|
                                make use of this, simply define a <code>cookies</code> entry in the app config, e.g.
 | 
						|
                                like this: <code>'cookies' : ['_ga', '_gid', '_gat', /^_gac_.*$/i]</code>. You can
 | 
						|
                                also use regular expressions.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Custom callbacks</strong>: You can define custom callbacks
 | 
						|
                                for your applications that will be called with the given consent
 | 
						|
                                state (<code>true</code> if consent was given, <code>false</code> if not).
 | 
						|
                                They will be called when Klaro is loaded as well as each time the user updates
 | 
						|
                                the consent choices. This allows you to perform more advanced management
 | 
						|
                                tasks such as calling API endpoints to remove data.
 | 
						|
                            </li>
 | 
						|
                            <li>
 | 
						|
                                <strong>Custom styling</strong>: If you want to build your own
 | 
						|
                                stylesheet for Klaro, you can set the <code>style-prefix</code>
 | 
						|
                                data attribute of the script tag loading the library
 | 
						|
                                to customize the class of the main DIV element of Klaro's UI,
 | 
						|
                                e.g. like this: <code><script src="klaro.js"
 | 
						|
                                    data-style-prefix="my-styles"></script></code>
 | 
						|
                                This will assign the class <code>my-styles</code> class to Klaro's main DIV element and
 | 
						|
                                disable
 | 
						|
                                all default styles.
 | 
						|
                                <br />
 | 
						|
                                You can also use the non-CSS version of Klaro and include your own
 | 
						|
                                stylesheet, see <a href="#no-css">here</a>.
 | 
						|
                            </li>
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
            </div>
 | 
						|
            <article class="message is-warning">
 | 
						|
                <div class="message-body">
 | 
						|
                    Legal disclaimer: By using Klaro you agree that we (the Klaro authors) cannot be held
 | 
						|
                    responsible or liable for any damages resulting from
 | 
						|
                    the use of the software. Please note that we cannot guarantee that Klaro is
 | 
						|
                    bug-free (although we try our best) and suitable for your use case, so please
 | 
						|
                    be careful when using it. Finally, we cannot cannot provide any warranty or support
 | 
						|
                    beyond our voluntary help.
 | 
						|
                </div>
 | 
						|
            </article>
 | 
						|
 | 
						|
        </div>
 | 
						|
    </section>
 | 
						|
 | 
						|
    <hr />
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container questions">
 | 
						|
            <h1 class="title"><a name="help">Questions?</a></h1>
 | 
						|
            <div class="content">
 | 
						|
                <p>
 | 
						|
                    Do you have questions or problems? Then just head
 | 
						|
                    over to our <a href="https://github.com/KIProtect/klaro">GitHub page</a>
 | 
						|
                    and feel free to open an <a href="https://github.com/KIProtect/klaro/issues">issue</a>.
 | 
						|
                    If you want to contribute to Klaro, feel free to
 | 
						|
                    open a <a href="https://github.com/KIProtect/klaro/pulls">pull request</a>
 | 
						|
                    (but better ask us for advice before you make large changes). You can
 | 
						|
                    also reach us by e-mail at <a href="mailto:klaro@kiprotect.com">klaro@kiprotect.com</a>.
 | 
						|
                    We're looking forward to hear from you!
 | 
						|
                </p>
 | 
						|
                <article class="message is-success">
 | 
						|
                    <div class="message-body">
 | 
						|
                        By the way, Klaro is pronounced [klɛro] and is a colloquial German word that means
 | 
						|
                        "alright" or "got it".
 | 
						|
                    </div>
 | 
						|
                </article>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </section>
 | 
						|
 | 
						|
    <hr />
 | 
						|
 | 
						|
    <section>
 | 
						|
        <div class="container questions">
 | 
						|
            <h1 class="title"><a name="privacy">Privacy Policy</a></h1>
 | 
						|
            <div class="content">
 | 
						|
                <p>
 | 
						|
                    This website is a project by <a href="https://kiprotect.com/company/imprint">KIProtect</a>.
 | 
						|
                    We use third-party applications and cookies on this site
 | 
						|
                    for analytics, demonstration purposes and security.
 | 
						|
                    You can review your consents
 | 
						|
                    for these <a href="#" onClick="klaro.show();return false;">here</a>.
 | 
						|
                    You have the following rights regarding your personal
 | 
						|
                    data: Erasure, rectification, access / download,
 | 
						|
                    portability, restriction of processing and filing a
 | 
						|
                    complaint at a responsible data protection agency.
 | 
						|
                </p>
 | 
						|
                <p>
 | 
						|
                    You can reach us at <a href="mailto:privacy@kiprotect.com">privacy@kiprotect.com</a>
 | 
						|
                    if you have any questions regarding this website or
 | 
						|
                    your personal data.
 | 
						|
                </p>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </section>
 | 
						|
    <!-- our (real) Matomo tracking code -->
 | 
						|
    <script type="text/plain" data-type="application/javascript" data-name="matomo">
 | 
						|
        var _paq = _paq || [];
 | 
						|
            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
 | 
						|
            _paq.push(['trackPageView']);
 | 
						|
            _paq.push(['enableLinkTracking']);
 | 
						|
            (function() {
 | 
						|
                var u="//analytics.7scientists.com/";
 | 
						|
                _paq.push(['setTrackerUrl', u+'piwik.php']);
 | 
						|
                _paq.push(['setSiteId', '7']);
 | 
						|
                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 | 
						|
                g.type='application/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
 | 
						|
            })();
 | 
						|
        </script>
 | 
						|
    <noscript>
 | 
						|
        <p><img data-name="matomo" data-src="//analytics.7scientists.com/piwik.php?idsite=7&rec=1" style="border:0;"
 | 
						|
                alt="" /></p>
 | 
						|
    </noscript>
 | 
						|
 | 
						|
</body>
 | 
						|
 | 
						|
</html>
 |