-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
65 lines (52 loc) · 3.76 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cookie Consent Demo Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="cookie-consent.css">
</head>
<body>
<!-- Consent Bar - Example setting level 20 for 8 hours upon continued usage, and level 80 for 1 year if the user clicks the button -->
<div class="cookie-consent" data-level="20" data-duration="8">
<p>We use cookies on this website. <span class="hidden-xs">Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site.</span>
By continuing to use the site without changing settings, you are agreeing to our use of cookies.
<a href="#">Read Privacy Notice</a></p>
<button type="button" class="btn btn-primary cookie-accept" data-level="80" data-duration="8760">OK</button>
</div>
<!-- Consent Bar - Best practice example allowing only necessary cookies by default and let users opt in to different consent levels -->
<!--
<div class="cookie-consent">
<button type="button" class="close cookie-accept" data-level="0" data-duration="8">×<span class="hidden">Dismiss</span></button>
<p>We use cookies on this website. <span class="hidden-xs">Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site.</span>
<a href="#">Read Privacy Notice</a></p>
<button type="button" class="btn btn-secondary cookie-accept" data-level="0" data-duration="72">Necessary cookies only</button>
<button type="button" class="btn btn-primary cookie-accept" data-level="80" data-duration="8760">Accept all cookies</button>
</div>
-->
<!-- Consent Bar - Example using fallback values for all configurable options (cookie duration etc) -->
<!--
<div class="cookie-consent">
<p>We use cookies on this website. <span>Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site.</span>
<a href="#">Read Privacy Notice</a></p>
<button type="button" class="cookie-accept">Accept cookies</button>
</div>
-->
<!-- You may set up your own additional buttons anywhere to change the consent level as needed -->
<!--
<button type="button" class="btn btn-secondary" onClick="$.cookie('cookie-consent', 0, 720); return false;">Opt-Out</button>
<button type="button" class="btn btn-secondary" onClick="$.cookie('cookie-consent', 50, 720); return false;">Accept experience cookies</button>
-->
<h1>🍪 Cookie Consent Demo</h1>
<p>The consent bar is observed by the <code>cookie-consent.js</code> script and shown until the user clicks the opt-in button. It is possible to set up multiple buttons to trigger different consent levels (allow necessary cookies only, allow experience cookies, allow all cookies etc.).</p>
<p>Warning: The example below is configured to consent due to continued usage. This is not valid anymore in the EU, take a look at the README to learn how to set up correct consent levels.</p>
<p>The example <code>tracker.js</code> script will output different messages to the console depending on the stored consent level.</p>
<p>The cookie consent repository is available at <a href="https://gitlab.com/pixelbrackets/cookie-consent/">GitLab</a> & <a href="https://github.com/pixelbrackets/cookie-consent/">GitHub</a> (Mirror).</p>
<p>Demo page made with <a href="https://html5example.com/">html5example.com</a>.</p>
<!-- Cookie Consent Scripts -->
<script src="cookie.js"></script>
<script src="cookie-consent.js"></script>
<!-- Example script depending on cookie consent level -->
<script src="tracker.js"></script>
</body>
</html>