Skip to content

Quick cookie consent

Add basic cookie consent to your website.

EU law requires any website or app that uses cookies to explicitly warn users and get their consent. Many sites use Google Analytics to gather basic usage info. In order to track users, Google Analytics stores cookies in users' browsers. To comply with EU law, add a simple alert. This post explains how.

Go to Cookie Consent. This is a free, open source cookie consent JavaScript library, under MIT licence.

On their download page, configure your alert using their GUI. This includes setting the position of the alert, colours and text.

Copy the generated code, and add it to the <head> of all your pages. If you use a static site generator, this may mean adding it to a head template or partial. In MadCap Flare, add it to the master pages. The initial code will look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){     
     window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#333f48",
                "text": "#ffffff"
            },
            "button": {
                "background": "#ffffff",
                "text": "#000000"
            }
        },
        "position": "top",
        "content": {
            "message": "<your cookie message>",
            "dismiss": "Continue",
            "link": "Privacy Policy",
            "href": "<url to your privacy policy>"
        }
    });
});    
</script>

Optional step: host files yourself, rather than pull them from a CDN. You can get the minified files from Cookie Consent's GitHub repo. Copy the files from the /build/ folder.

Place the files with your other CSS and JS files in your project. Modify the paths accordingly:

1
2
<link rel="stylesheet" type="text/css" href="<path to your CSS folder>/cookieconsent.min.css" />
<script src="<path to your JavaScript folder>/cookieconsent.min.js"></script>

Ensure users only have to accept cookies once

We don't want users to see this alert every time they come to the documentation. Cookie Consent automatically adds a cookie when the user clicks to accept cookies, but we need to modify the code to check for this. We wrap the existing code in the following:

1
if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss")

Here is the full code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link rel="stylesheet" type="text/css" href="<path to your CSS folder>/cookieconsent.min.css" />
<script src="<path to your JavaScript folder>/cookieconsent.min.js"></script>
window.addEventListener("load", function(){         
    if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss"){          
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#333f48",
                    "text": "#ffffff"
                },
                "button": {
                    "background": "#ffffff",
                    "text": "#000000"
                }
            },
            "position": "top",
                "content": {
                    "message": "<your cookie message>",
                    "dismiss": "Continue",
                    "link": "Privacy Policy",
                    "href": "<url to your privacy policy>"
                }
            });
        }
    });
</script>

Hire me for a docs consultation