Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beyonk-group/gdpr-cookie-consent-banner
A GDPR compliant cookie consent banner implementation
https://github.com/beyonk-group/gdpr-cookie-consent-banner
banner cookie cookie-consent gdpr gdpr-cookie svelte-components vanilla-js
Last synced: 3 months ago
JSON representation
A GDPR compliant cookie consent banner implementation
- Host: GitHub
- URL: https://github.com/beyonk-group/gdpr-cookie-consent-banner
- Owner: beyonk-group
- License: mit
- Created: 2018-07-30T13:28:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-08T15:49:09.000Z (4 months ago)
- Last Synced: 2024-07-23T16:55:16.081Z (3 months ago)
- Topics: banner, cookie, cookie-consent, gdpr, gdpr-cookie, svelte-components, vanilla-js
- Language: Svelte
- Size: 548 KB
- Stars: 241
- Watchers: 6
- Forks: 42
- Open Issues: 12
-
Metadata Files:
- Readme: README.MD
- License: LICENSE.txt
Awesome Lists containing this project
README
## GDPR Cookie Consent banner
[](http://standardjs.com) [](https://github.com/beyonk-adventures/gdpr-cookie-consent-banner/actions/workflows/publish.yml) [](https://kit.svelte.dev) [](https://svelte.dev)
### What is it?
Svelte implementation of a compliant GDPR banner. It allows the user granular opt-in and out of four different cookie categories.
It now works with SvelteKit without any workarounds!
### What are its features?
* Small, discrete, and non-intrusive
* GDPR Compliant
* Responsive
* Offers four categories
* Runs any function on opting-in
* Runs opted-in functions on each visit
* Changing the choices requires the user to opt-in again.
* Svelte Ready
* No dependencies
* Choices expire yearly
* Optional CSS (with BEM) to bootstrap your cookie message right away
* Modifiable labels and messages
### How do I install it?
#### Via NPM
Simply install the node module into your codebase.
```bash
npm install --save-dev @beyonk/gdpr-cookie-consent-banner
```
#### Via CDN
Tap into either [unpkg](https://unpkg.com) or [jsdelivr](https://jsdelivr.net):
```html
```
### Usage
#### Svelte
Just use it as a regular svelte component:
```svelte
import '@beyonk/gdpr-cookie-consent-banner/banner.css' // optional, you can also define your own styles
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
function initAnalytics () {
// do something with segment.io or google analytics etc
}
```
#### HTML / Web Component
Use the custom HTML element `cookie-consent-banner`:
```html
```
### Methods
You can re-call the cookie banner from an external link by binding the component instance and calling `show()` on it.
```svelte
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
let gdprBanner
gdprBanner.show()
```
### Props
The defaults are shown below.
When using as a Web Component, use the lower-dash-case version of the attribute name, pass booleans as strings, and object attributes as json strings
It is not possible to opt-out of 'necessary' cookies.
```js
const props = {
/**
* You must set the cookie name.
**/
cookieName: 'beyonk_gdpr',
/**
* Whether to display the banner to the user or not. This can be because you're in an iframe
* and there is no room to show it if they haven't already consented, but, if they have already
* consented, you want to action the "enableAnalytics" and similar handlers if they *have*.
*
* Default is true
*
* For Web Components, pass `visible="true"`
**/
visible: true,
/**
* The cookie configuration, such as domain and path.
*
* For web components, pass a JSON string: `cookie-config='{ "domain": "example.com", "path": "/" }'`
**/
cookieConfig: {
domain: 'example.com',
path: '/'
},
/**
* These are the top two lines of text on the banner
* The 'description' field can include html such as links
**/
heading: 'GDPR Notice',
description: 'We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our privacy policy page. By clicking accept, you consent to our privacy policy & use of cookies.',
/**
* All the button labels and aria-label content.
**/
acceptLabel: 'Confirm all',
rejectLabel: 'Reject all',
settingsLabel: 'Preferences',
closeLabel: 'Close window',
editLabel: 'Edit settings',
/**
* These are the default opt-ins and their descriptions.
* When value is set to true, the option will automatically be checked on load.
*
* If you want to hide a category, simply set it to false, e.g. 'marketing: false'
**/
choices: {
necessary: {
label: "Necessary cookies",
description: "Used for cookie control. Can't be turned off.",
value: true
},
tracking: {
label: "Tracking cookies",
description: "Used for advertising purposes.",
value: true
},
analytics: {
label: "Analytics cookies",
description: "Used to control Google Analytics, a 3rd party tool offered by Google to track user behavior.",
value: true
},
marketing: {
label: "Marketing cookies",
description: "Used for marketing data.",
value: true
}
},
/**
* Show an icon to edit cookies later, when banner is closed.
**/
showEditIcon: true
}
```
### Events
Events are how you react to consent. Each type of consent emits an event when agreed to by the user.
For convenience when using Web Components - and to work around race conditions whereby events are emitted by the component prior to the handler being attached, we also emit the same events, with the prefix `consent`, on `window`.
#### Svelte
```svelte
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
function initAnalytics () {
// some fathom analytics tracking code or similar
}
```
#### HTML / Web Components
```html
document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
// some fathom analytics tracking code or similar
})
// We also emit these events on `window`
window.addEventListener('consent:analytics', () => {
// some fathom analytics tracking code or similar
})
```