GDPR Cookie Consent Banner in vanilla js

Downloads in past


9.0.310 months ago4 years agoMinified + gzip package size for @beyonk/gdpr-cookie-consent-banner in KB


GDPR Cookie Consent banner

js-standard-style actions SvelteKit Svelte v3

What is it?

This is a vanilla JS implementation (thanks to Svelte) 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.
  • Vanilla JS
  • 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?


Simply install the node module into your codebase.
npm install --save-dev @beyonk/gdpr-cookie-consent-banner

then import the banner into your code:
import attachBanner from '@beyonk/gdpr-cookie-consent-banner'
import '@beyonk/gdpr-cookie-consent-banner/dist/style.css' // import optional styles


Using raw javascript

From a CDN
<link rel="stylesheet" href="//unpkg.com/@beyonk/gdpr-cookie-consent-banner/dist/style.css">
<script src="//unpkg.com/@beyonk/gdpr-cookie-consent-banner/dist/browser/bundle.min.js"></script>
Storing a local copy
Download the contents of dist/browser/bundle.js and dist/style.css to your codebase, and include it in your html:
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/bundle.js"></script>


Because this banner was designed to work across three different technology stacks, usage is a bit different to a regular es module.
I've documented our usage of it below:


Just use it as a regular svelte component:
<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />

  import '@beyonk/gdpr-cookie-consent-banner/dist/style.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

Nuxt / Vue

You can use the banner in NuxtJS application as follows:
Create a component which uses the library, and mounts it during the render stage:
  <div ref="gdprBanner"></div>

  export default {
    mounted () {
      const { attachBanner } = require('@beyonk/gdpr-cookie-consent-banner/dist/esm/bundle.js')
      attachBanner(this.$refs.gdprBanner, {
        heading: 'Cookie policy'

Optionally, add this to your CSS array in your nuxt.config.js file:
 * Global CSS
css: ['your_other_css_file.css', '@beyonk/gdpr-cookie-consent-banner/dist/style.css'],


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} />

  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  let gdprBanner



The defaults are shown below, simply put modified versions of as many of the below into an options object, and pass it to attachBanner.
It is not possible to opt-out of 'necessary' cookies.
const options = {
   * 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
  acceptLabel: 'Confirm all',
  settingsLabel: 'Preferences',
  closeLabel: 'Close window',

   * 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')
GdprConsent.attachBanner(document.body, options)