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-banner
Via CDN
Tap into either unpkg or jsdelivr:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
Usage
Svelte
Just use it as a regular svelte component:
<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
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
}
</script>
HTML / Web Component
Use the custom HTML element cookie-consent-banner
:
<link
rel="stylesheet"
src="//cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/src/lib/banner.css"
/>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
<cookie-consent-banner cookieName="foo" description="bar" />
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.
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.
const props = {
cookieName: 'beyonk_gdpr',
visible: true,
cookieConfig: {
domain: 'example.com',
path: '/'
},
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.',
acceptLabel: 'Confirm all',
rejectLabel: 'Reject all',
settingsLabel: 'Preferences',
closeLabel: 'Close window',
editLabel: 'Edit settings',
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
}
},
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
<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />
<script>
import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
function initAnalytics () {
// some fathom analytics tracking code or similar
}
</script>
HTML / Web Components
<cookie-consent-banner cookieName="foo" description="bar" />
<script>
document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
})
window.addEventListener('consent:analytics', () => {
})
</script>