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!
- 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
Simply install the node module into your codebase.
npm install --save-dev @beyonk/gdpr-cookie-consent-banner
Tap into either unpkg or jsdelivr:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>
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>
Use the custom HTML element cookie-consent-banner
:
<!-- optional, you can also define your own styles, or override the provided ones -->
<link
rel="stylesheet"
href="//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 cookie-name="foo" description="bar" />
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>
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 = {
/**
* 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 <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
}
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
.
<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>
<cookie-consent-banner cookie-name="foo" description="bar" />
<script>
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
})
</script>