GDPR Cookie Consent banner
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.
npm install --save-dev @beyonk/gdpr-cookie-consent-bannerUsage
Svelte
Just use it as a regular svelte component:
<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
import '@beyonk/gdpr-cookie-consent-banner/style.css' // optional, you can also define your own styles
import { Banner as GdprBanner } from '@beyonk/gdpr-cookie-consent-banner'
function initAnalytics () {
// do something with segment.io or google analytics etc
}
</script>Methods
You can re-call the cookie banner from an external link by binding the component instance and calling show() on it.
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
import { GdprBanner } from '@beyonk/gdpr-cookie-consent-banner'
let gdprBanner
gdprBanner.show()
</script>Props
The defaults are shown below.
It is not possible to opt-out of 'necessary' cookies.
const props = {
/**
* You must set the cookie name.
**/
cookieName: 'beyonk_gdpr',
/**
* The cookie configuration, such as domain and 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 <a href="/privacy-policy">privacy policy page</a>. 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,
/**
* These are the functions which are run if a user opts-in to that category.
* You should drop your cookies here (or set a variable to control the later dropping of cookies.
*
* If you are using svelte, you can use events instead - see the Svelte section below.
**/
categories: {
analytics: function() {
console.log('No analytics cookies specified')
},
tracking: function() {
console.log('No tracking cookies specified')
},
marketing: function() {
console.log('No marketing cookies specified')
},
necessary: function() {
console.log('No necessary cookies specified')
}
}
}