├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── cookie-consent-content
├── de.json
├── en.json
├── oc.json
└── sk.json
├── examples
├── cookie-banner-example.html
├── legal-notice.html
└── privacy-policy.html
├── favicon.ico
├── index.html
├── package-lock.json
├── package.json
├── php
└── Shaack
│ └── BootstrapCookieConsentSettings.php
└── src
└── bootstrap-cookie-consent-settings.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | src/bootstrap-cookie-consent-settings.js linguist-vendored=false
2 | index.html linguist-documentation
3 | demo/legal-notice.html linguist-documentation
4 | demo/privacy-policy.html linguist-documentation
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea
2 | /node_modules
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Stefan Haack
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # bootstrap-cookie-consent-settings
2 |
3 | A modal dialog (cookie banner) and framework to handle the EU law (as written by EuGH, 1.10.2019 – C-673/17)
4 | about cookies in a website. Needs Bootstrap 5.
5 |
6 | ## References
7 |
8 | - [Demo page](https://shaack.com/projekte/bootstrap-cookie-consent-settings)
9 | - [GitHub Repository](https://github.com/shaack/bootstrap-cookie-consent-settings)
10 | - [npm package](https://www.npmjs.com/package/bootstrap-cookie-consent-settings)
11 |
12 | ## Usage
13 |
14 | ### Construct
15 |
16 | Initialize the cookie consent framework with the constructor
17 |
18 | ```js
19 | var cookieSettings = new BootstrapCookieConsentSettings(props)
20 | ```
21 |
22 | You should configure the framework with the `props` object, at least the properties `privacyPolicyUrl`, `legalNoticeUrl`
23 | and `contentURL`. The default configuration is
24 |
25 | ```js
26 | this.props = {
27 | privacyPolicyUrl: undefined, // the URL of your privacy policy page
28 | legalNoticeUrl: undefined, // the URL of you legal notice page (Impressum)
29 | contentURL: "/cookie-consent-content", // this folder must contain the language-files in the needed languages (`[lang].js`)
30 | buttonAgreeClass: "btn btn-primary", // the "Agree to all" buttons class
31 | buttonDontAgreeClass: "btn btn-link text-decoration-none", // the "I do not agree" buttons class
32 | buttonSaveClass: "btn btn-secondary", // the "Save selection" buttons class
33 | autoShowModal: true, // disable autoShowModal on the privacy policy and legal notice pages, to make these pages readable
34 | alsoUseLocalStorage: true, // if true, the settings are stored in localStorage, too
35 | postSelectionCallback: undefined, // callback function, called after the user has saved the settings
36 | lang: navigator.language, // the language, in which the modal is shown
37 | defaultLang: "en", // default language, if `lang` is not available as translation in `cookie-consent-content`
38 | categories: ["necessary", "statistics", "marketing", "personalization"], // the categories for selection, must be contained in the language files
39 | cookieName: "cookie-consent-settings", // the name of the cookie in which the configuration is stored as JSON
40 | cookieStorageDays: 365, // the duration the cookie configuration is stored on the client
41 | modalId: "bootstrapCookieConsentSettingsModal" // the id of the modal dialog element
42 | }
43 | ```
44 |
45 | ### Show dialog
46 |
47 | On a new visit the dialog is shown automatically.
48 |
49 | To allow the user a reconfiguration you can show the Dialog again with
50 |
51 | ```js
52 | cookieSettings.showDialog()
53 | ```
54 |
55 | ### Read the settings in JavaScript
56 |
57 | Read all cookie settings with
58 |
59 | ```js
60 | cookieSettings.getSettings()
61 | ```
62 |
63 | It should return some JSON like
64 |
65 | ```json
66 | {
67 | "necessary": true,
68 | "statistics": true,
69 | "marketing": true,
70 | "personalization": true
71 | }
72 | ```
73 |
74 | or `undefined`, before the user has chosen his cookie options.
75 |
76 | Read a specific cookie setting with
77 |
78 | ```js
79 | cookieSettings.getSettings('statistics')
80 | ```
81 |
82 | for the `statistics` cookie settings. Also returns `undefined`, before the user has chosen his cookie options.
83 |
84 | ### Read the settings from the backend
85 |
86 | You can read the settings with all server languages, you just have to read the cookie `cookie-consent-settings`.
87 | The content of the cookie is encoded like a http query string.
88 |
89 | ```
90 | necessary=true&statistics=false&marketing=true&personalization=true
91 | ```
92 |
93 | #### PHP helper class
94 |
95 | I provide a PHP helper class that you can use to read and write the settings from a PHP backend.
96 |
97 | It is located in `php/Shaack/BootstrapCookieConsentSettings.php`.
98 |
99 | You can use it as described in the following example.
100 |
101 | ```PHP
102 | $cookieSettings = new \Shaack\BootstrapCookieConsentSettings();
103 | // read all settings
104 | $allSettings = $cookieSettings->getSettings();
105 | // read a specific setting
106 | $statisticsAllowed = $cookieSettings->getSetting("statistics");
107 | // write a specific setting
108 | $cookieSettings->setSetting("statistics", false);
109 | ```
110 |
111 | ### Internationalization
112 |
113 | You find the language files in `./cookie-consent-content`. You can add here language files or modify the existing. If
114 | you add language files please consider a pull request to also add them in this repository. Thanks.
115 |
116 | ## Disclaimer
117 |
118 | You can use this banner for your website free of charge under the [MIT-License](./LICENSE).
119 |
120 | The banner and framework was designed in cooperation with data protection officers and lawyers. However, we can not
121 | guarantee whether the banner is correct for your website and assume no liability for its use.
122 |
123 | ---
124 |
125 | Find more high quality modules from [shaack.com](https://shaack.com)
126 | on [our projects page](https://shaack.com/works).
127 |
--------------------------------------------------------------------------------
/cookie-consent-content/de.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Privatsphäre Einstellungen",
3 | "body": "Wir nutzen Cookies und ähnliche Technologien, die zum Betrieb der Website erforderlich sind. Zusätzliche Cookies werden nur mit Ihrer Zustimmung verwendet. Es steht Ihnen frei, Ihre Zustimmung jederzeit zu geben, zu verweigern oder zurückzuziehen, indem Sie den Link \"Cookie-Einstellungen\" unten auf jeder Seite nutzen. Sie können der Verwendung von Cookies durch uns zustimmen, indem Sie auf \"Einverstanden\" klicken. Für weitere Informationen darüber, welche Daten gesammelt und wie sie an unsere Partner weitergegeben werden, lesen Sie bitte unsere --privacy-policy--.",
4 | "privacyPolicy": "Datenschutzerklärung",
5 | "legalNotice": "Impressum",
6 | "mySettings": "Meine Einstellungen",
7 | "buttonNotAgree": "Ich bin nicht einverstanden",
8 | "buttonAgree": "Einverstanden",
9 | "buttonSaveSelection": "Auswahl speichern",
10 | "buttonAgreeAll": "Allen zustimmen",
11 | "categories": {
12 | "necessary": {
13 | "title": "Notwendig",
14 | "description": ["Zum Betrieb der Website erforderlich"]
15 | },
16 | "statistics": {
17 | "title": "Statistik",
18 | "description": ["Beobachtung der Website-Nutzung und Optimierung der Benutzererfahrung"]
19 | },
20 | "marketing": {
21 | "title": "Marketing",
22 | "description": ["Bewertung von Marketingaktionen"]
23 | },
24 | "personalization": {
25 | "title": "Personalisierung",
26 | "description": ["Speicherung Ihrer Präferenzen aus früheren Besuchen",
27 | "Sammeln von Benutzer-Feedback zur Verbesserung unserer Website",
28 | "Erfassung Ihrer Interessen, um maßgeschneiderte Inhalte und Angebote anzubieten"]
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/cookie-consent-content/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Privacy Settings",
3 | "body": "We use cookies and similar technologies that are necessary to operate the website. Additional cookies are only used with your consent. You are free to give, deny, or withdraw your consent at any time by using the \"cookie settings\" link at the bottom of each page. You can consent to our use of cookies by clicking \"Agree\". For more information about what information is collected and how it is shared with our partners, please read our --privacy-policy--.",
4 | "privacyPolicy": "Data Protection Statement",
5 | "legalNotice": "Legal Notice",
6 | "mySettings": "My Settings",
7 | "buttonNotAgree": "I do not agree",
8 | "buttonAgree": "Agree",
9 | "buttonSaveSelection": "Save selection",
10 | "buttonAgreeAll": "Agree to all",
11 | "categories": {
12 | "necessary": {
13 | "title": "Necessary",
14 | "description": ["Required to run the website"]
15 | },
16 | "statistics": {
17 | "title": "Statistics",
18 | "description": ["Monitoring website usage and optimizing the user experience"]
19 | },
20 | "marketing": {
21 | "title": "Marketing",
22 | "description": ["Evaluation of marketing actions"]
23 | },
24 | "personalization": {
25 | "title": "Personalization",
26 | "description": ["Storage of your preferences from previous visits",
27 | "Collecting user feedback to improve our website",
28 | "Recording of your interests in order to provide customised content and offers"]
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/cookie-consent-content/oc.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Paramètres de confidencialitat",
3 | "body": "Utilizam de cookies e de tecnologias similaras que fan mestièr pel foncionament del site web. De cookies addicionals son sonque utilizats amb vòstre acòrd. Sètz liure de donar, refusar o tirar vòstre acòrd a tot moment en utilizant lo ligam «Paramètres de cookies» enbàs de cada pagina. Podètz consentir a nòstra utilizacion dels cookies en clicant «Acceptar». Per mai d'informacions tocant quina informacion es collectada e partejada amb nòstre socis, vejatz nòstra --privacy-policy--.",
4 | "privacyPolicy": "declaracion de proteccion de las donadas",
5 | "legalNotice": "Mencions legalas",
6 | "mySettings": "Mos paramètres",
7 | "buttonNotAgree": "Soi pas d'acòrd",
8 | "buttonAgree": "Acceptar",
9 | "buttonSaveSelection": "Enregistrar la seleccion",
10 | "buttonAgreeAll": "Tot acceptar",
11 | "categories": {
12 | "necessary": {
13 | "title": "Necessaris",
14 | "description": ["Requerits pel foncionament del site"]
15 | },
16 | "statistics": {
17 | "title": "Estatisticas",
18 | "description": ["Per susvelhar l'utilizacion del site e melhorar l'experiéncia dels utilizaires"]
19 | },
20 | "marketing": {
21 | "title": "Marketing",
22 | "description": ["Estudi de las accions de marketing"]
23 | },
24 | "personalization": {
25 | "title": "Personalizacion",
26 | "description": ["Gardar las preferéncias de visitas precedentas",
27 | "Reculhir los comentaris dels utilizaire per melhorar nòstre site web",
28 | "Enregistrar vòstres interesses per vos fornir de contenguts e publicitats personalizats<"]
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/cookie-consent-content/sk.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Nastavenia ochrany osobných údajov",
3 | "body": "Používame cookies a podobné technológie, ktoré sú nevyhnutné na prevádzku webovej stránky. Ďalšie súbory cookie sa používajú iba s vaším súhlasom. Svoj súhlas môžete kedykoľvek udeliť, odmietnuť alebo odvolať pomocou odkazu \"nastavenia súborov cookie\" v spodnej časti každej stránky. Kliknutím na \"Súhlasím\" môžete súhlasiť s naším používaním súborov cookie. Ďalšie informácie o tom, aké informácie sa zhromažďujú a ako sa zdieľajú s našimi partnermi, nájdete v našich --privacy-policy--.",
4 | "privacyPolicy": "Vyhlásenie o ochrane údajov",
5 | "legalNotice": "Právne upozornenie",
6 | "mySettings": "Moje nastavenia",
7 | "buttonNotAgree": "Nesúhlasím",
8 | "buttonAgree": "Súhlasím",
9 | "buttonSaveSelection": "Uložiť výber",
10 | "buttonAgreeAll": "Súhlas so všetkým",
11 | "categories": {
12 | "necessary": {
13 | "title": "Nevyhnutné",
14 | "description": ["Vyžaduje sa na spustenie webovej stránky"]
15 | },
16 | "statistics": {
17 | "title": "Štatistiky",
18 | "description": ["Monitorovanie používania webových stránok a optimalizácia používateľskej skúsenosti"]
19 | },
20 | "marketing": {
21 | "title": "Marketing",
22 | "description": ["Hodnotenie marketingových akcií"]
23 | },
24 | "personalization": {
25 | "title": "Personalizácia",
26 | "description": ["Ukladanie vašich preferencií z predchádzajúcich návštev",
27 | "Zhromažďovanie spätnej väzby od používateľov na zlepšenie našej webovej stránky",
28 | "Zaznamenávanie vašich záujmov s cieľom poskytnúť prispôsobený obsah a ponuky"]
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/examples/cookie-banner-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
This is a modal dialog (cookie banner) and framework to handle the German and EU law (as written by EuGH,
15 | 1.10.2019 – C-673/17) about cookies in a website. This banner requires Bootstrap.
16 |
Usage
17 |
Construct
18 |
Initialize the cookie consent framework with the constructor
19 |
var cookieSettings = new BootstrapCookieConsent()
20 |
Show the Dialog
21 |
On a new visit the dialog is shown automatically. For reconfiguration
22 | show the Dialog again with cookieSettings.showDialog().
23 |
This is a modal dialog (cookie banner) and framework to handle the German and EU law (as written by EuGH,
14 | 1.10.2019 – C-673/17) about cookies in a website. This banner requires Bootstrap.
15 |
We also have another, smaller cookie banner, without dependencies, which
16 | does not offer the user an advanced configuration. You can find it in GitHub as
17 | cookie-consent-js.