Cookiemunch

What is Cookiemunch?

Its a simple, customizable, minimal setup cookie plugin that allows your users to select which cookies to accept or decline.

If you wish to support this project please buy me a coffee. ☕

Change the cookie settings to see it in action:

Change 🍪 settings to update this view!

  (To test as a new visitor)



Layouts:

Both:

Optional:


Required:

Grouping:

Themes:

How do I install it?


With NPM:

npm i @dunks1980/cookiemunch --save

import { cookiemunch } from "@dunks1980/cookiemunch";
import svgimage from "@dunks1980/cookiemunch/cookiemunch.svg"; // optional
import "@dunks1980/cookiemunch/cookiemunch.min.css";

// Light & Dark themes: (replace css import)
// @dunks1980/cookiemunch/cookiemunch_flat_light.min.css
// @dunks1980/cookiemunch/cookiemunch_flat_dark.min.css

copy to clipboard
copy
npmjs.com/package/@dunks1980/cookiemunch
Vue.js example

Without a package manager:

Add the following script and style tags inside the <head></head> of your web page.

<script src="https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.min.css">

<!-- Light & Darks themes (replace href above) --> 
<!-- https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_light.min.css -->
<!-- https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_dark.min.css --> 

copy to clipboard
copy

Or as a custom element:

Add the following element and script tag to the <body></body> of your web page.

The custom element option is best for preventing CSS on the page interfering with Cookiemunch's CSS.

Demo HTML

<cookie-munch css-file="https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.min.css"></cookie-munch>
<script src="https://unpkg.com/@dunks1980/cookiemunch/cookie_munch_element.min.js"></script>

<!-- Light & Darks themes (replace css-file attribute above) --> 
<!-- https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_light.min.css -->
<!-- https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_dark.min.css --> 

copy to clipboard
copy

Quick settings to get up and running:

Add this inside the <body></body> of the web page or script file after Cookiemunch scripts:

Or with all optional settings

<script>
var options = {
  settings: {
    cookie_title: 'My site cookies'
  },
  cookies: [
    {
      id: "1",
      name: "example 1",
      used_for: "To collect analyitical data and monitor performance.",
      url_text: "Privacy",
      url: "https://google.com",
      accepted_function: "console.log('accepted_function fired!!!');",
      declined_function: "console.log('declined_function fired!!!');"
    },
    {
      id: "2",
      name: "example 2",
      used_for: "To collect analyitical data and monitor performance.",
      url_text: "Privacy",
      url: "https://google.com",
      accepted_function: add_example_script,
      declined_function: remove_example_script
    }
  ]
};

cookiemunch(options);

function add_example_script() {
  console.log("add_example_script fired!!!");
}
function remove_example_script() {
  console.log("remove_example_script fired!!!");
}
</script>
    copy to clipboard
    copy

Source files can be found here:

GitHub

How do I use it?

Settings are optional, include the settings you want to change.

{settings:{key: value}}

reload

Boolean[Default: false]

If true the window will reload after the user changes their cookie preference.

required

Boolean[Default: false] (added v1.1.3)

If true the user will not be able to interact with the page until cookie options have been selected, the background will also darken (or lighten depending on theme) and the page will be scroll blocked.

hide_icon

Boolean[Default: false]

If true it hides the icon thats shows when the panel is closed.

(the panel will always stay open if no cookie options have been selected).

cookies_to_exclude

Array[Default: []]

If cookie name is in Array the cookie will be ignored when deleting all cookies. These could be cookies from your application/framework.

keep_all_cookies

Boolean[Default: false]

If true it leaves the cookies as they are and then fires accepted_function or declined_function.
The cookies_to_exclude will not be needed if this setting is true, removal of cookies could then be handled by the declined_function for more granular control.

If false deletes all cookies when cookie settings change, then fires accepted_function or declined_function. If your application/framework sets cookies it may be best to set this to true.

first_visit_checked

Boolean[Default: false]

On users first visit (before they select an option).

If true all the checkboxes on the panel will be checked.

If false all the checkboxes on the panel will be unchecked.

start_dropdown_closed

Boolean[Default: false]

If true and if both optional and required cookies are set, the expansion panels will start closed. Useful if you have a large number of cookies.

If false and if both optional and required cookies are set, optional cookies expansion panel will start expanded and required cookies will start closed.

check_switch_icons

Boolean[Default: false] (added v1.2.1)

If true the × and ✓ icons show on the checkbox.

If false they dont.

cookies_duration

Number[Default: 365] (added v1.2.8)

Number of days until Cookiemunch's cookies expire (Cookiemunch only).

cookies_secure

Boolean[Default: false] (added v1.2.8)

Set's the secure flag on Cookiemunch's cookies (Cookiemunch only).

cookie_image

String[Default: https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.svg]

URI of image to load.

Variants:

light svg variant https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.svg
light svg variant https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_light.svg
dark svg variant https://unpkg.com/@dunks1980/cookiemunch/cookiemunch_flat_dark.svg



If using imports, change the file name:

import svgimage from "@dunks1980/cookiemunch/cookiemunch_flat_[light or dark].svg";

Or, you can use your own image with a 1:1 square ratio.

cookie_title

String[Default: Cookies settings]

Header title of the pop-up panel.

cookie_optional, cookie_required

String[Defaults: Optional, Required]

Text for the optional and required expansion panels (if both optional and required cookies).

cookie_accept_label

String[Default: Allow Cookies:]

Text above the buttons when optional cookies are present.

cookie_required_label

String[Default: These Cookies are required in order for the site to function.]

Text above the buttons when only required cookies are present.

cookie_button_none, cookie_button_required, cookie_button_select, cookie_button_selected, cookie_button_all, cookie_button_no, cookie_button_yes, cookie_button_agree

String[Defaults: None, Required, Select, Selected, All, No, Yes, Close]

Text on the buttons.


All keys and values are required for the cookies object, except for group.

These are the optional opt in cookies.

{cookies:[{key: value,...},{...},...]}

id

String

ID (needs to be unique).

group

String(added v1.1.0)

Adds the cookie to a group (Analytics, Marketing, ect...)

This will create another tab like optional and required with the name of the group.

Any cookies in the cookies object that dont have a group will go into the Optional tab.

name

String

Name of the cookie provider on the pop-up (e.g., Google tag manager).

used_for

String

A brief description of what the cookie is used for.

url_text

String

Text of the link to get more information (e.g., Privacy).

url

String

URL to get more information.

accepted_function

String || Function

String:

A string of javascript, example: 

accepted_function: "console.log('example'); window['ga-disable-YOUR-ID'] = false; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'YOUR-ID');"
this can be useful if getting data from an api call.


Function:

Name of the function that will be called if that cookie is accepted. Function needs to be in or above cookiemunch(options) scope. If no function exists will throw an error, see example below.


Be careful if you intend on using this function to add script tags, may get duplication if the user toggles the cookie option on/off. You could use the declined_function to remove them but would probably be best to use settings.reload.

declined_function

String || Function

String:

A string of javascript, example: 

declined_function: "window['ga-disable-YOUR-ID'] = true;"


Function:

Name of the function that will be called if that cookie is declined. Function needs to be in or above cookiemunch(options) scope. If no function exists will throw an error (create an empty function if not needed), see example below.


All keys and values are required for required_cookies object.

These are the required cookies in order for the site to function.

{required_cookies:[{key: value,...},{...},...]}

name

String

Name of the cookie provider on the pop-up (e.g., Cloudflare).

used_for

String

A brief description of what the cookie is used for.

url_text

String

Text of the link to get more information (e.g., Privacy).

url

String

URL to get more information.


Functions

cookiemunch(options_passed, block_functions, callback)


Calling cookiemunch(options) loads the plugin with the options object and fires the accepted_function or declined_function (depending on which the user checked). If block_functions is true the accepted_function or declined_function will not fire.


Use this to initialize the plugin on page load (after the Cookiemunch js file is loaded):

(Don't pass block_functions as true here or cookie functions will not be fired!).

cookiemunch(cookiemunch_options);

To change plugin settings without firing cookie functions:

cookiemunch(cookiemunch_options, true);

To fire a callback function once loaded:

cookiemunch(cookiemunch_options, function() {
  console.log('Cookiemunch loaded!');
});

To fire a callback function after settings change:

cookiemunch(cookiemunch_options, true, function() {
  console.log('Cookiemunch re-loaded!');
});

Example of changing plugin settings (could be language for example).

cookiemunch_options.settings.cookie_title !== 'I changed!' ?
cookiemunch_options.settings.cookie_title = 'I changed!' :
cookiemunch_options.settings.cookie_title = 'Cookiemunch cookies';
cookiemunch(cookiemunch_options, true);
    copy to clipboard
    copy

cookiemunch_toggle_popup()


This will toggle the panel to open and close if cookies have been previously accepted or declined:

cookiemunch_remove_all_cookies()


This will remove all cookies, useful for testing as a user that is coming to your site for the first time. Use with caution, see cookies_to_exclude and keep_all_cookies in the settings object.

Examples

Some sites using Cookiemunch:
Screen time converter
LED Multi

Boilerplate with default settings:

<script>
cookiemunch_options = {
  settings: {
    reload: false,
    required: false,
    hide_icon: false,
    cookies_to_exclude: [],
    keep_all_cookies: false,
    first_visit_checked: false,
    start_dropdown_closed: false,
    check_switch_icons: false,
    cookies_duration: 365,
    cookies_secure: false,
    cookie_image: 'https://unpkg.com/@dunks1980/cookiemunch/cookiemunch.svg',
    cookie_title: 'Cookies settings',
    cookie_optional: 'Optional',
    cookie_required: 'Required',
    cookie_accept_label: 'Allow Cookies:',
    cookie_required_label: 'These Cookies are required in order for the site to function.',
    cookie_button_none: 'None',
    cookie_button_required: 'Required',
    cookie_button_select: 'Select',
    cookie_button_selected: 'Selected',
    cookie_button_all: 'All',
    cookie_button_no: 'No',
    cookie_button_yes: 'Yes',
    cookie_button_agree: 'Close'
  },
  cookies: [
    {
      id: 'Optional Example',
      group: '',
      name: 'Optional Example',
      used_for: 'Description or what this cookie is for.',
      url_text: 'Read more',
      url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies',
      accepted_function: accepted_function,
      declined_function: declined_function
    }
  ],
  required_cookies: [
    {
      name: 'Essential cookies',
      used_for: 'these are cookies that are either: used solely to carry out or facilitate the transmission of communications over a network; or. strictly necessary to provide an online service (e.g. our website or a service on our website) which you have requested.',
      url_text: 'Read more',
      url: 'https://gdprprivacypolicy.org/cookies-policy/'
    }
  ]
};

function accepted_function() {
  console.log("accepted_function");
}

function declined_function() {
  console.log("declined_function");
}

cookiemunch(cookiemunch_options);
</script>
    copy to clipboard
    copy

Example of the setup on this site:

<script>
cookiemunch_options = {
  settings: {
    first_visit_checked: true,
    cookie_image: '/cookiemunch.svg',
    cookie_title: 'Cookiemunch cookies',
    start_dropdown_closed: true
  },
  cookies: [
    {
      id: "gtm",
      name: "Google tag manager",
      used_for: "To collect analyitical data and monitor performance.",
      url_text: "Privacy",
      url: "https://policies.google.com/privacy",
      accepted_function: cookiemunch_gtm,
      declined_function: cookiemunch_gtm_off
    },
    {
      id: "ga",
      name: "some analylitics",
      used_for: "Some description of what the cookie is used for.",
      url_text: "Privacy & Terms",
      url: "https://dunks1980.com/",
      accepted_function: some_function_name,
      declined_function: some_function_name_off
    },
    {
      id: "tracker",
      name: "some tracker",
      used_for: "Some description of what the cookie is used for.",
      url_text: "Privacy & Terms",
      url: "https://dunks1980.com/",
      accepted_function: some_tracker,
      declined_function: some_tracker_off
    }
  ],
  required_cookies: [
    {
      name: "Cloudflare",
      used_for: "Cookie is set by Cloudflare to speed up their load times...",
      url_text: "Privacy policy",
      url: "https://www.cloudflare.com/en-gb/privacypolicy/"
    }
  ]
};

cookiemunch(cookiemunch_options);

function cookiemunch_gtm() {
  // Google analylitics function fires! (example)
  window['ga-disable-YOUR-ID'] = false;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR-ID');
}

function cookiemunch_gtm_off() {
  // remove Google tag manage code
  window['ga-disable-YOUR-ID'] = true;
}

function some_function_name() {
  // some analylitics function fires!
}

function some_function_name_off() {
  // remove some analylitics function fires!
}

function some_tracker() {
  // some tracker function fires!
}

function some_tracker_off() {
  // remove some tracker function fires!
}
</script>
    copy to clipboard
    copy

Vue.js example:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ cookiemunch_message }}</h1>
</template>
    
<script>
import { cookiemunch } from "@dunks1980/cookiemunch";
import svgimage from "@dunks1980/cookiemunch/cookiemunch.svg";
import "@dunks1980/cookiemunch/cookiemunch.min.css";

export default {
  name: "App",
  data() {
    return {
      cookiemunch_options: {
        settings: undefined,
        cookies: undefined,
        required_cookies: undefined,
      },
      cookiemunch_message: undefined,
    };
  },
  mounted() {
    let vm = this;

    this.cookiemunch_options.settings = {
      first_visit_checked: true,
      cookie_title: "Cookiemunch cookies",
      cookie_image: svgimage,
      start_dropdown_closed: true,
    };

    this.cookiemunch_options.cookies = [
      {
        id: "gtm",
        name: "Google tag manager",
        used_for: "To collect analyitical data and monitor performance.",
        url_text: "Privacy",
        url: "https://policies.google.com/privacy",
        accepted_function: () => {
          // example google tag code
          window.dataLayer = window.dataLayer || [];
          window["ga-disable-YOUR-ID"] = false;
          function gtag() {
            window.dataLayer.push(arguments);
          }
          gtag("js", new Date());
          gtag("config", "YOUR-ID");
          vm.cookiemunch_message =
            "Accepted Google tag manager, function fires and 🍪 added!";
        },
        declined_function: () => {
          window["ga-disable-YOUR-ID"] = true;
          vm.cookiemunch_message =
            "Declined Google tag manager, function fires and 🍪 removed!";
        },
      },
    ];

    this.cookiemunch_options.required_cookies = [
      {
        name: "Cloudflare",
        used_for: "Cookie is set by Cloudflare to speed up their load times...",
        url_text: "Privacy policy",
        url: "https://www.cloudflare.com/en-gb/privacypolicy/",
      },
    ];

    cookiemunch(this.cookiemunch_options);
  },
};
</script>

copy to clipboard
copy

How do I style it?

If you would like to create a totally custom theme, the SCSS files used to create them can be found on GitHub.

If you only want to change the colours the following CSS is for the buttons and switchs, you can add it to your stylesheet or a style tag after the link tag:

/* switch colour */
input:checked+.cookiemunch_slider {
  background-color: #6e4845;
}

/* None button */
#cookiemunch_decline {
  background-color: #c53131;
}
#cookiemunch_decline:focus, 
#cookiemunch_decline:hover {
  background-color: #a52828;
}

/* Select button */
#cookiemunch_accept_select {
  background-color: #636363;
}
#cookiemunch_accept_select:hover,
#cookiemunch_accept_select:focus {
  background-color: #4b4b4b;
}

/* Selected button */
#cookiemunch_accept_selected {
  background-color: #6e4845;
}
#cookiemunch_accept_selected:focus,
#cookiemunch_accept_selected:hover {
  background-color: #4d3230;
}

/* All button */
#cookiemunch_accept_all {
  background-color: #b97850;
}
#cookiemunch_accept_all:focus, 
#cookiemunch_accept_all:hover {
  background-color: #8f5d3d;
}
copy to clipboard
copy