1 | [![Build status — Travis-CI][travis-icon]][travis]
|
2 | [![cookie-notice on Npmjs][npm-icon]][npm]
|
3 | [![License][license-icon]][mit]
|
4 | [![Total downloads ~ Npmjs][downl-icon]][npm]
|
5 | [![Size of Javascript][size-icon]][build]
|
6 |
|
7 | # CookieNotice
|
8 |
|
9 | **CookieNoticeJS** is a very simple, extendable and small *(→ 2 kB gzip)* vanilla JS script with multi language support
|
10 | for [GDPR][]/[DSGVO][] transparency and notification purposes that provides an easy way to show a cookie notice on your
|
11 | website.
|
12 |
|
13 | **Cookie notice at the bottom of the page**
|
14 | <img src="https://i.imgur.com/xodbOdi.png" alt="cookie notice working example" align="center"/>
|
15 |
|
16 | **Cookie notice at the top of the page**
|
17 | <img src="https://i.imgur.com/XOfijh6.png" alt="cookie notice working example" align="center"/>
|
18 |
|
19 | **Available via [npm][]**
|
20 |
|
21 | ```shell
|
22 | npm install cookie-notice
|
23 | npm test
|
24 | ```
|
25 |
|
26 | **To use in your project There are plenty ways for integration:**
|
27 |
|
28 | **When installed via npm, include in any project by using path below:**
|
29 |
|
30 | ```html
|
31 |
|
32 | <script src="node-modules/cookie-notice/dist/cookie.notice.min.js"></script>
|
33 | ```
|
34 |
|
35 | **For usage with Angular2+ add line below in "scripts" section in angular-cli.json:**
|
36 |
|
37 | ```json
|
38 | {
|
39 | "scripts": [
|
40 | "../node_modules/cookie-notice/dist/cookie.notice.js",
|
41 | "../optional/path/to/custom/cookie-notice-config.js"
|
42 | ]
|
43 | }
|
44 | ```
|
45 |
|
46 | **When cloned directly from gitHub use path below:**
|
47 |
|
48 | ```html
|
49 |
|
50 | <script src="cookie-notice/dist/cookie.notice.min.js"></script>
|
51 | ```
|
52 |
|
53 | ## Behavior
|
54 |
|
55 | You will get a dismissable banner on the bottom of your pages showing a default cookie audit like the following:
|
56 |
|
57 | > We use cookies to make sure you can have the best experience on our website. If you continue to use this site we assume that you will be happy with it.
|
58 |
|
59 | You can check out an example integration
|
60 | at [Deutsche Telekom](https://breitband.telekom-dienste.de/kundencenter-breitband).
|
61 |
|
62 | Depending on the visitor browser language one of the preloaded translations will be shown. At the moment **
|
63 | CookieNoticeJS** supports following languages out of the box:
|
64 |
|
65 | - IT (Italiano)
|
66 | - EN (English) `default`
|
67 | - FR (Français)
|
68 | - PT (Português)
|
69 | - ES (Español)
|
70 | - NL (Nederlands)
|
71 | - DE (Deutsch)
|
72 | - PL (Polski)
|
73 |
|
74 | > You can also add any other language code
|
75 |
|
76 | If you want to contribute with an extra language or find translation issues do not hesitate to open an issue or a PR.
|
77 |
|
78 | **CookieNoticeJS** has been successfully tested on IE9+, Chrome, Firefox and Safari.
|
79 |
|
80 | ## Customize CookieNoticeJS
|
81 |
|
82 | For the most of you including the script should be enough but **CookieNoticeJS** comes with many customization options.
|
83 | Let's see an example:
|
84 |
|
85 | ```html
|
86 |
|
87 | <script src="js/cookie.notice.min.js"></script>
|
88 | <script>
|
89 | new cookieNoticeJS({
|
90 |
|
91 | // Localizations of the notice message
|
92 | 'messageLocales': {
|
93 | 'it': 'Custom localized message'
|
94 | },
|
95 |
|
96 | // Localizations of the dismiss button text
|
97 | 'buttonLocales': {
|
98 | 'it': 'Chiudi'
|
99 | },
|
100 |
|
101 | // Position for the cookie-notifier (default=bottom)
|
102 | 'cookieNoticePosition': 'top',
|
103 |
|
104 | // Shows the "learn more button (default=false)
|
105 | 'learnMoreLinkEnabled': false,
|
106 |
|
107 | // The href of the learn more link must be applied if (learnMoreLinkEnabled=true)
|
108 | 'learnMoreLinkHref': '/learn/more/index.html',
|
109 |
|
110 | // Text for optional learn more button
|
111 | 'learnMoreLinkText': {
|
112 | 'en': 'learn more'
|
113 | },
|
114 |
|
115 | // The message will be shown again in X days
|
116 | 'expiresIn': 30,
|
117 |
|
118 | // Specify a custom font family and size in pixels
|
119 | 'fontFamily': 'inherit',
|
120 | 'fontSize': '12px',
|
121 |
|
122 | // Dismiss button background color
|
123 | 'buttonBgColor': '#d35400',
|
124 |
|
125 | // Dismiss button text color
|
126 | 'buttonTextColor': '#fff',
|
127 |
|
128 | // Notice background color
|
129 | 'noticeBgColor': '#000',
|
130 |
|
131 | // Notice text color
|
132 | 'noticeTextColor': '#fff',
|
133 |
|
134 | // the learnMoreLink color (default='#009fdd')
|
135 | 'linkColor': '#f00',
|
136 |
|
137 | // The target of the learn more link (default='', or '_blank')
|
138 | 'linkTarget': '',
|
139 |
|
140 | // Print debug output to the console (default=false)
|
141 | 'debug': false
|
142 | });
|
143 | </script>
|
144 | ```
|
145 |
|
146 | ## Configuration via `data-` attribute
|
147 |
|
148 | Configuration options can be put in a `data-cookie-notice` HTML attribute in JSON format. Note, you can include the
|
149 | Javascript from the [unpkg][] CDN ([browse][]). For example:
|
150 |
|
151 | ```html
|
152 |
|
153 | <script
|
154 | data-cookie-notice='{ "learnMoreLinkEnabled": true, "learnMoreLinkHref": "/privacy.html" }'
|
155 | src="https://unpkg.com/cookie-notice@^1/dist/cookie.notice.min.js"
|
156 | ></script>
|
157 | ```
|
158 |
|
159 | #### Author
|
160 |
|
161 | Alessandro Benoit
|
162 |
|
163 | #### Contributors
|
164 |
|
165 | - [Bernhard Behrendt](mailto:bernhard.behrendt@aoe.com) [@AOEpeople](https://github.com/AOEpeople),
|
166 | - [Nick Freear](https://github.com/nfreear) [IET at the OU](https://github.com/IET-OU)
|
167 | - [Matthias Schröder](https://github.com/schroedermatthias)
|
168 | - [Andrea Bergamasco](https://github.com/vjandrea)
|
169 |
|
170 | ### License
|
171 |
|
172 | License: [MIT][]
|
173 |
|
174 |
|
175 | [MIT]: https://github.com/micc83/cookie-notice-js/blob/master/LICENSE
|
176 | "License: MIT | Copyright © 2018 Alessandro Benoit (micc83)."
|
177 |
|
178 | [MIT-0]: https://mit-license.org/#2018
|
179 |
|
180 | [travis-icon]: https://travis-ci.org/AOEpeople/cookie-notice.svg?branch=master
|
181 |
|
182 | [travis]: https://travis-ci.org/AOEpeople/cookie-notice "Build status – Travis-CI"
|
183 |
|
184 | [npm]: https://npmjs.com/package/cookie-notice "CookieNotice – on NPM"
|
185 |
|
186 | [npm-icon]: https://badge.fury.io/js/cookie-notice.svg
|
187 |
|
188 | [npm-i0]: https://img.shields.io/npm/v/cookie-notice.svg "(Timeout errors)"
|
189 |
|
190 | [license-icon]: https://img.shields.io/npm/l/cookie-notice.svg
|
191 |
|
192 | [downl-icon]: https://img.shields.io/npm/dt/cookie-notice.svg "Count of total downloads – NPM"
|
193 |
|
194 | [build]: https://github.com/AOEpeople/cookie-notice/tree/master/dist
|
195 |
|
196 | [size-icon]: https://img.shields.io/github/size/AOEpeople/cookie-notice/dist/cookie.notice.min.js.svg
|
197 | "Size of built Javascript, kilo-bytes (kB) – on GitHub"
|
198 |
|
199 | [unpkg]: https://unpkg.com/ "unpkg is a fast, global content delivery network (CDN) for everything on npm."
|
200 |
|
201 | [browse]: https://unpkg.com/cookie-notice@^1/ "Browse cookie-notice on unpkg"
|
202 |
|
203 | [DSGVO]: https://de.wikipedia.org/wiki/Datenschutz-Grundverordnung "Datenschutz-Grundverordnung (DSGVO)"
|
204 |
|
205 | [GDPR]: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation "General Data Protection Regulation (GDPR)"
|
206 |
|
207 | [End]: //.
|