folder structur and .hold files
added klaro files (src and external)
Dieser Commit ist enthalten in:
Ortwin Pinke
Ursprung
f3db2db64b
Commit
dae36da7a0
|
|
@ -0,0 +1,13 @@
|
|||
# Klaro Distribution Files
|
||||
|
||||
These files are transpiled from the `src` folder, you can integrate them into your website. The following
|
||||
files are available for download:
|
||||
|
||||
* [klaro.js](klaro.js): Minified version of Klaro, CSS included.
|
||||
* [klaro-no-css.js](klaro-no-css.js): Minified version of Klaro, CSS **not** included.
|
||||
* [klaro.css](klaro.css): Non-minified CSS (useful if you want to modify it yourself).
|
||||
* [klaro.min.css](klaro.min.css): Minified CSS.
|
||||
|
||||
If you want to use Klaro with its existing styles (which you can still overwrite with more specific rules)
|
||||
simply download and include [klaro.js](klaro.js). If you want to define your own styles from scratch, simply
|
||||
download and include [klaro-no-css.js](klaro-no-css.js).
|
||||
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
|
|
@ -0,0 +1,331 @@
|
|||
// By default, Klaro will load the config from a global "klaroConfig" variable.
|
||||
// You can change this by specifying the "data-config" attribute on your
|
||||
// script take, e.g. like this:
|
||||
// <script src="klaro.js" data-config="myConfigVariableName" />
|
||||
var klaroConfig = {
|
||||
// With the 0.7.0 release we introduce a 'version' paramter that will make
|
||||
// if easier for us to keep configuration files backwards-compatible in the future.
|
||||
version: 1,
|
||||
|
||||
// You can customize the ID of the DIV element that Klaro will create
|
||||
// when starting up. If undefined, Klaro will use 'klaro'.
|
||||
elementID: 'klaro',
|
||||
|
||||
// You can override CSS style variables here. For IE11, Klaro will
|
||||
// dynamically inject the variables into the CSS. If you still consider
|
||||
// supporting IE9-10 (which you probably shouldn't) you need to use Klaro
|
||||
// with an external stylesheet as the dynamic replacement won't work there.
|
||||
styling: {
|
||||
theme: ['light', 'top', 'wide'],
|
||||
},
|
||||
|
||||
// Setting this to true will keep Klaro from automatically loading itself
|
||||
// when the page is being loaded.
|
||||
noAutoLoad: false,
|
||||
|
||||
// Setting this to true will render the descriptions of the consent
|
||||
// modal and consent notice are HTML. Use with care.
|
||||
htmlTexts: true,
|
||||
|
||||
// Setting 'embedded' to true will render the Klaro modal and notice without
|
||||
// the modal background, allowing you to e.g. embed them into a specific element
|
||||
// of your website, such as your privacy notice.
|
||||
embedded: false,
|
||||
|
||||
// You can group services by their purpose in the modal. This is advisable
|
||||
// if you have a large number of services. Users can then enable or disable
|
||||
// entire groups of services instead of having to enable or disable every service.
|
||||
groupByPurpose: true,
|
||||
|
||||
// How Klaro should store the user's preferences. It can be either 'cookie'
|
||||
// (the default) or 'localStorage'.
|
||||
storageMethod: 'cookie',
|
||||
|
||||
// You can customize the name of the cookie that Klaro uses for storing
|
||||
// user consent decisions. If undefined, Klaro will use 'klaro'.
|
||||
cookieName: 'klaro',
|
||||
|
||||
// You can also set a custom expiration time for the Klaro cookie.
|
||||
// By default, it will expire after 120 days.
|
||||
cookieExpiresAfterDays: 365,
|
||||
|
||||
// You can change to cookie domain for the consent manager itself.
|
||||
// Use this if you want to get consent once for multiple matching domains.
|
||||
// If undefined, Klaro will use the current domain.
|
||||
//cookieDomain: '.github.com',
|
||||
|
||||
// Defines the default state for services (true=enabled by default).
|
||||
default: false,
|
||||
|
||||
// If "mustConsent" is set to true, Klaro will directly display the consent
|
||||
// manager modal and not allow the user to close it before having actively
|
||||
// consented or declines the use of third-party services.
|
||||
mustConsent: false,
|
||||
|
||||
// Show "accept all" to accept all services instead of "ok" that only accepts
|
||||
// required and "default: true" services
|
||||
acceptAll: true,
|
||||
|
||||
// replace "decline" with cookie manager modal
|
||||
hideDeclineAll: false,
|
||||
|
||||
// hide "learnMore" link
|
||||
hideLearnMore: false,
|
||||
|
||||
// show cookie notice as modal
|
||||
noticeAsModal: false,
|
||||
|
||||
// You can also remove the 'Realized with Klaro!' text in the consent modal.
|
||||
// Please don't do this! We provide Klaro as a free open source tool.
|
||||
// Placing a link to our website helps us spread the word about it,
|
||||
// which ultimately enables us to make Klaro! better for everyone.
|
||||
// So please be fair and keep the link enabled. Thanks :)
|
||||
//disablePoweredBy: true,
|
||||
|
||||
// you can specify an additional class (or classes) that will be added to the Klaro `div`
|
||||
//additionalClass: 'my-klaro',
|
||||
|
||||
// You can define the UI language directly here. If undefined, Klaro will
|
||||
// use the value given in the global "lang" variable. If that does
|
||||
// not exist, it will use the value given in the "lang" attribute of your
|
||||
// HTML tag. If that also doesn't exist, it will use 'en'.
|
||||
//lang: 'en',
|
||||
|
||||
// You can overwrite existing translations and add translations for your
|
||||
// service descriptions and purposes. See `src/translations/` for a full
|
||||
// list of translations that can be overwritten:
|
||||
// https://github.com/KIProtect/klaro/tree/master/src/translations
|
||||
|
||||
// Example config that shows how to overwrite translations:
|
||||
// https://github.com/KIProtect/klaro/blob/master/src/configs/i18n.js
|
||||
translations: {
|
||||
// translationsed defined under the 'zz' language code act as default
|
||||
// translations.
|
||||
zz: {
|
||||
privacyPolicyUrl: '/#privacy',
|
||||
},
|
||||
// If you erase the "consentModal" translations, Klaro will use the
|
||||
// bundled translations.
|
||||
de: {
|
||||
privacyPolicyUrl: '/#datenschutz',
|
||||
consentModal: {
|
||||
description:
|
||||
'Hier können Sie einsehen und anpassen, welche Information wir über Sie sammeln. Einträge die als "Beispiel" gekennzeichnet sind dienen lediglich zu Demonstrationszwecken und werden nicht wirklich verwendet.',
|
||||
},
|
||||
inlineTracker: {
|
||||
description: 'Beispiel für ein Inline-Tracking Skript',
|
||||
},
|
||||
externalTracker: {
|
||||
description: 'Beispiel für ein externes Tracking Skript',
|
||||
},
|
||||
adsense: {
|
||||
description: 'Anzeigen von Werbeanzeigen (Beispiel)',
|
||||
title: 'Google AdSense Werbezeugs',
|
||||
},
|
||||
matomo: {
|
||||
description: 'Sammeln von Besucherstatistiken',
|
||||
},
|
||||
camera: {
|
||||
description:
|
||||
'Eine Überwachungskamera (nur ein Beispiel zu IMG-Tags)',
|
||||
},
|
||||
cloudflare: {
|
||||
description: 'Schutz gegen DDoS-Angriffe',
|
||||
},
|
||||
intercom: {
|
||||
description:
|
||||
'Chat Widget & Sammeln von Besucherstatistiken (nur ein Beispiel)',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Echtzeit-Benutzeranalyse (nur ein Beispiel)',
|
||||
},
|
||||
googleFonts: {
|
||||
description: 'Web-Schriftarten von Google gehostet',
|
||||
},
|
||||
purposes: {
|
||||
analytics: 'Besucher-Statistiken',
|
||||
security: 'Sicherheit',
|
||||
livechat: 'Live Chat',
|
||||
advertising: 'Anzeigen von Werbung',
|
||||
styling: 'Styling',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
consentModal: {
|
||||
title: '<u>test</u>',
|
||||
description:
|
||||
'Here you can see and customize the information that we collect about you. Entries marked as "Example" are just for demonstration purposes and are not really used on this website.',
|
||||
},
|
||||
inlineTracker: {
|
||||
description: 'Example of an inline tracking script',
|
||||
},
|
||||
externalTracker: {
|
||||
description: 'Example of an external tracking script',
|
||||
},
|
||||
adsense: {
|
||||
description: 'Displaying of advertisements (just an example)',
|
||||
title: 'Google Adsense Advertisement',
|
||||
},
|
||||
matomo: {
|
||||
description: 'Collecting of visitor statistics',
|
||||
},
|
||||
camera: {
|
||||
description:
|
||||
'A surveillance camera (just an example for an IMG tag)',
|
||||
},
|
||||
cloudflare: {
|
||||
description: 'Protection against DDoS attacks',
|
||||
},
|
||||
intercom: {
|
||||
description:
|
||||
'Chat widget & collecting of visitor statistics (just an example)',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Real-Time user analytics (just an example)',
|
||||
},
|
||||
googleFonts: {
|
||||
description: 'Web fonts hosted by Google',
|
||||
},
|
||||
purposes: {
|
||||
analytics: 'Analytics',
|
||||
security: 'Security',
|
||||
livechat: 'Livechat',
|
||||
advertising: 'Advertising',
|
||||
styling: 'Styling',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// This is a list of third-party services that Klaro will manage for you.
|
||||
services: [
|
||||
{
|
||||
name: 'twitter',
|
||||
purposes: ['marketing'],
|
||||
// Setting this to true will exempt this service from the "Accept All"
|
||||
// flow, i.e. clicking on "Accept All" will not enable this service.
|
||||
contextualConsentOnly: true,
|
||||
},
|
||||
{
|
||||
name: 'youtube',
|
||||
purposes: ['marketing'],
|
||||
contextualConsentOnly: true,
|
||||
},
|
||||
{
|
||||
// Each service should have a unique (and short) name.
|
||||
name: 'matomo',
|
||||
|
||||
// If "default" is set to true, the service will be enabled by default
|
||||
// Overwrites global "default" setting.
|
||||
// We recommend leaving this to "false" for services that collect
|
||||
// personal information.
|
||||
default: true,
|
||||
|
||||
// The title of you service as listed in the consent modal.
|
||||
title: 'Matomo/Piwik',
|
||||
|
||||
// The purpose(s) of this service. Will be listed on the consent notice.
|
||||
// Do not forget to add translations for all purposes you list here.
|
||||
purposes: ['analytics'],
|
||||
|
||||
// A list of regex expressions or strings giving the names of
|
||||
// cookies set by this service. If the user withdraws consent for a
|
||||
// given service, Klaro will then automatically delete all matching
|
||||
// cookies.
|
||||
cookies: [
|
||||
// you can also explicitly provide a path and a domain for
|
||||
// a given cookie. This is necessary if you have services that
|
||||
// set cookies for a path that is not "/" or a domain that
|
||||
// is not the current domain. If you do not set these values
|
||||
// properly, the cookie can't be deleted by Klaro
|
||||
// (there is no way to access the path or domain of a cookie in JS)
|
||||
// Notice that it is not possible to delete cookies that were set
|
||||
// on a third-party domain! See the note at mdn:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#new-cookie_domain
|
||||
[/^_pk_.*$/, '/', 'klaro.kiprotect.com'], //for the production version
|
||||
[/^_pk_.*$/, '/', 'localhost'], //for the local version
|
||||
'piwik_ignore',
|
||||
],
|
||||
|
||||
// An optional callback function that will be called each time
|
||||
// the consent state for the service changes (true=consented). Passes
|
||||
// the `service` config as the second parameter as well.
|
||||
callback: function(consent, service) {
|
||||
// This is an example callback function.
|
||||
console.log(
|
||||
'User consent for service ' + service.name + ': consent=' + consent
|
||||
);
|
||||
// To be used in conjunction with Matomo 'requireCookieConsent' Feature, Matomo 3.14.0 or newer
|
||||
// For further Information see https://matomo.org/faq/new-to-piwik/how-can-i-still-track-a-visitor-without-cookies-even-if-they-decline-the-cookie-consent/
|
||||
/*
|
||||
if(consent==true){
|
||||
_paq.push(['rememberCookieConsentGiven']);
|
||||
} else {
|
||||
_paq.push(['forgetCookieConsentGiven']);
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
// If "required" is set to true, Klaro will not allow this service to
|
||||
// be disabled by the user.
|
||||
required: false,
|
||||
|
||||
// If "optOut" is set to true, Klaro will load this service even before
|
||||
// the user gave explicit consent.
|
||||
// We recommend always leaving this "false".
|
||||
optOut: false,
|
||||
|
||||
// If "onlyOnce" is set to true, the service will only be executed
|
||||
// once regardless how often the user toggles it on and off.
|
||||
onlyOnce: true,
|
||||
},
|
||||
|
||||
// The services will appear in the modal in the same order as defined here.
|
||||
{
|
||||
name: 'inlineTracker',
|
||||
title: 'Inline Tracker',
|
||||
purposes: ['analytics'],
|
||||
cookies: ['inline-tracker'],
|
||||
optOut: false,
|
||||
},
|
||||
{
|
||||
name: 'externalTracker',
|
||||
title: 'External Tracker',
|
||||
purposes: ['analytics', 'security'],
|
||||
cookies: ['external-tracker'],
|
||||
},
|
||||
{
|
||||
name: 'intercom',
|
||||
title: 'Intercom',
|
||||
default: true,
|
||||
purposes: ['livechat'],
|
||||
},
|
||||
{
|
||||
name: 'mouseflow',
|
||||
title: 'Mouseflow',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
{
|
||||
name: 'adsense',
|
||||
// if you omit the title here Klaro will try to look it up in the
|
||||
// translations
|
||||
//title: 'Google AdSense',
|
||||
purposes: ['advertising'],
|
||||
},
|
||||
{
|
||||
name: 'camera',
|
||||
title: 'Surveillance Camera',
|
||||
purposes: ['security'],
|
||||
},
|
||||
/* {
|
||||
name: 'googleFonts',
|
||||
title: 'Google Fonts',
|
||||
purposes: ['styling'],
|
||||
},*/
|
||||
{
|
||||
name: 'cloudflare',
|
||||
title: 'Cloudflare',
|
||||
purposes: ['security'],
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
var klaroI18nConfig = {
|
||||
version: 2,
|
||||
cookieName: 'klaro-i18n',
|
||||
elementID: 'klaro',
|
||||
lang: 'en',
|
||||
default: true,
|
||||
noNotice: true,
|
||||
poweredBy:
|
||||
'https://github.com/KIProtect/klaro/blob/master/dist/configs/i18n.js',
|
||||
translations: {
|
||||
// these values will overwrite the defaults. For a full list, have a look
|
||||
// at the `src/translations` directory of this repo:
|
||||
// https://github.com/KIProtect/klaro/tree/master/src/translations
|
||||
zz: {
|
||||
privacyPolicyUrl: '/#privacy',
|
||||
},
|
||||
de: {
|
||||
privacyPolicyUrl: '/#datenschutz',
|
||||
consentModal: {
|
||||
title: 'Dies ist der Titel des Zustimmungs-Dialogs',
|
||||
description:
|
||||
'Dies ist die Beschreibung des Zustimmungs-Dialogs.',
|
||||
privacyPolicy: {
|
||||
text:
|
||||
'Dies ist der Text mit einem Link zu Ihrer {privacyPolicy}.',
|
||||
name: 'Datenschutzerklärung (Name)',
|
||||
},
|
||||
},
|
||||
poweredBy: 'Konfiguration ansehen',
|
||||
ok: "Los geht's!",
|
||||
purposes: {
|
||||
analytics: 'Besucher-Statistiken',
|
||||
security: 'Sicherheit',
|
||||
livechat: 'Live-Chat',
|
||||
advertisting: 'Anzeigen von Werbung',
|
||||
},
|
||||
googleAnalytics: {
|
||||
description: 'Sammeln von Besucherstatistiken',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Echtzeit-Benutzeranalyse',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
consentModal: {
|
||||
title: 'This is the title of the consent modal',
|
||||
description: 'This is the description of the consent modal.',
|
||||
privacyPolicy: {
|
||||
text: 'This is the text with a link to your {privacyPolicy}.',
|
||||
name: 'privacy policy (the name)',
|
||||
},
|
||||
},
|
||||
poweredBy: 'view config',
|
||||
ok: 'Wohoo!',
|
||||
purposes: {
|
||||
analytics: 'Analytics',
|
||||
security: 'Security',
|
||||
livechat: 'Livechat',
|
||||
},
|
||||
googleAnalytics: {
|
||||
description: 'Collection of visitor statistics',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Real-time user analytics',
|
||||
},
|
||||
},
|
||||
},
|
||||
services: [
|
||||
{
|
||||
name: 'googleAnalytics',
|
||||
title: 'Google Analytics',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
{
|
||||
name: 'mouseflow',
|
||||
title: 'Mouseflow',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
// By default, Klaro will load the config from a global "klaroConfig" variable.
|
||||
// You can change this by specifying the "data-config" attribute on your
|
||||
// script take, e.g. like this:
|
||||
// <script src="klaro.js" data-config="myConfigVariableName" />
|
||||
var klaroConfig = {
|
||||
acceptAll: true,
|
||||
translations: {
|
||||
|
||||
},
|
||||
services: [
|
||||
{
|
||||
name: 'google-tag-manager',
|
||||
required: true,
|
||||
purposes: ['marketing', 'functional'],
|
||||
manages: ['google-analytics'],
|
||||
onAccept: `
|
||||
// we notify the tag manager about all services that were accepted. You can define
|
||||
// a custom event in GTM to load the service if consent was given.
|
||||
for(let k of Object.keys(opts.consents)){
|
||||
if (opts.consents[k]){
|
||||
let eventName = 'klaro-'+k+'-accepted'
|
||||
dataLayer.push({'event': eventName})
|
||||
}
|
||||
}
|
||||
// if consent for Google Analytics was granted we enable analytics storage
|
||||
if (opts.consents[opts.vars.googleAnalyticsName || 'google-analytics']){
|
||||
console.log("Google analytics usage was granted")
|
||||
gtag('consent', 'update', {'analytics_storage': 'granted'})
|
||||
}
|
||||
// if consent for Google Ads was granted we enable ad storage
|
||||
if (opts.consents[opts.vars.adStorageName || 'google-ads']){
|
||||
console.log("Google ads usage was granted")
|
||||
gtag('consent', 'update', {'ad_storage': 'granted'})
|
||||
}
|
||||
`,
|
||||
onInit: `
|
||||
// initialization code here (will be executed only once per page-load)
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function(){dataLayer.push(arguments)}
|
||||
gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
|
||||
gtag('set', 'ads_data_redaction', true)
|
||||
`,
|
||||
onDecline: `
|
||||
// initialization code here (will be executed only once per page-load)
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function(){dataLayer.push(arguments)}
|
||||
gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
|
||||
gtag('set', 'ads_data_redaction', true)
|
||||
`,
|
||||
vars: {
|
||||
googleAnalytics: 'google-analytics'
|
||||
}
|
||||
},
|
||||
{
|
||||
// In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
|
||||
name: 'google-analytics',
|
||||
purposes: ['marketing'],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>Simple Test</title>
|
||||
<!-- Google Tag Manager -->
|
||||
<script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-MZTF9XR');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- here we include the Klaro config and script -->
|
||||
<script defer type="text/javascript" src="gtm-config.js"></script>
|
||||
<script defer type="text/javascript" src="../klaro.js"></script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Arial, Helvetica, sans serif;">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div style="padding: 10px;">
|
||||
<h1>Google Tag Manager Example</h1>
|
||||
<p>
|
||||
This is an example that shows how to use Klaro with Google Tag Manager.
|
||||
</p>
|
||||
<p>
|
||||
You can review and update your consents by clicking <a href="" onClick="return klaro.show(klaroConfig, true)">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
You can reset your consents by clicking <a href="" onClick="klaro.getManager().resetConsents();location.reload()">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<!-- this is an example of an img tag managed by Klaro -->
|
||||
<img data-name="camera" data-src="../assets/Surveillance-camera-small.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>Simple Test</title>
|
||||
<!-- here we include the Klaro config and script -->
|
||||
<script defer type="text/javascript" src="../config.js"></script>
|
||||
<script defer type="text/javascript" src="../klaro.js"></script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Arial, Helvetica, sans serif;">
|
||||
<div style="padding: 10px;">
|
||||
<h1>Hello, wayward Internet traveler!</h1>
|
||||
<p>
|
||||
This is a page that shows how to use Klaro on your website.
|
||||
Just have a look at the source to see how it's done.
|
||||
</p>
|
||||
<p>
|
||||
You can review and update your consents by clicking <a href="" onClick="return klaro.show(klaroConfig, true)">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
You can reset your consents by clicking <a href="" onClick="klaro.getManager().resetConsents();location.reload()">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<!-- this is an example of an img tag managed by Klaro -->
|
||||
<img data-name="camera" data-src="../assets/Surveillance-camera-small.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- here are some examples for trackers-->
|
||||
|
||||
<!-- an inline JS tracking script -->
|
||||
<script type="text/plain" data-type="application/javascript" data-name="inlineTracker">
|
||||
|
||||
console.log("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>
|
||||
|
||||
<!-- an externally loaded tracker -->
|
||||
<script type="text/plain" data-src="../examples/tracker.js" data-type="application/javascript" data-name="externalTracker"></script>
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
console.log("This is an example of an external 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("external-tracker", "foo", 120)
|
||||
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
|
|
@ -0,0 +1,632 @@
|
|||
<!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>
|
||||
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
Laden…
In neuem Issue referenzieren