forked from klaro-org/klaro-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
632 lines (588 loc) · 31.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
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="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/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-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="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/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:[email protected]">[email protected]</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:[email protected]">[email protected]</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>