Get up and running with Cookie Control

Cookie Control V7 Technical Documentation

The full technical documentation includes details about installation, updating button text and language options, styling, policy, behaviours, event callbacks and post-initialisation commands.

Installing Cookie Control

Step 1

Cookie Control uses jQuery. You don't need to have this installed on your site already - the script will check for this. If you DO have it installed, please just check that you have jQuery version 1.4.4 or later: Cookie Control is not compatible with earlier versions of jQuery.

Step 2

Download the Cookie Control script

Upload it to your site. 

Step 3

Configure Cookie Control, and grab the code it generates for you. If you have generated an API key before, sign in to use the configurator again. Update the path to the location where you've placed the Cookie Control Script.

You may wish to create an include, embed it directly in your pages, or add it to an existing "footer" include for your site. It's entirely up to you.

Either way, the code needs to be within the <body> tag of your page.

Step 4

Apply Cookie Control events to your cookie-dropping scripts. This will ensure that they won't drop cookies unless a user has opted in.

Change the look

If you're handy with HTML and CSS, you can tweak the CSS to help Cookie Control fit in with the colour scheme of your site. Remember that you should use the Cookie Control icons if you are using the free version, but you may change the colour of these if it suits you.

Tidying up: Get rid of unnecessary cookies

Once you've done your cookie audit you'll have a clear idea of what cookies are at work on your site, and what they do. Some of them you may be able to get rid of altogether, without negatively impacting how your site works.

Social Sharing

Some of the worst offenders are social networks such as Facebook and Twitter, whose native sharing snippets drop cookies when users are logged in to those services. In these cases it is always possible to create sharing buttons that don't depend on cookies. For example:

<a id="share-facebook" class="facebook" rel="nofollow" target="_blank" 
title="Facebook - Link opens in a new window">Facebook</a>


Cookie Control has four handy callbacks that can be used to execute scripts:

  • onAccept: This callback runs ONCE, the FIRST time a user consents to cookies
  • onReady: This callback runs immediately after CookieControl has initialised and displayed its widget, if applicable.
  • onCookiesAllowed: This callback runs after CookieControl has initialised, if cookies are allowed.
  • onCookiesNotAllowed: This callback runs after CookieControl has initialised, if cookies are NOT (yet) allowed.

Tweaking your scripts

Cookie Control allows you to run your analytics, or other scripts with little effort. 

Cookie Contol provides you with two events in the script that you copied from the generator.

The first one is called "onAccept:function(){}" and the second one "onCookiesAllowed:function(){}".

The "onAccept" event fires off the function defined when the user consents to allow cookies. This can be very useful: It that means you don't lose the first visit in your analytics tracking. 

The "onCookiesAllowed" event fires off the function defined every time the user loads the page.

Google Analytics Example

You can use this example to deploy Google Analytics on your site: just add your own analytics code. Using this method you can launch Google Analytics after consent.

<script type="text/javascript">
  function ccAddAnalytics(){
    $.getScript("", function() { 
      var GATracker = _gat._createTracker("UA-XXXXXXX-X");
    } );

or in case you are using universal analytics:
<script type="text/javascript">
    function ccAddAnalytics() {
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

        ga('create', 'UA-XXXXXXX-X', 'your-domain');
        ga('send', 'pageview');

Calling your Function

Once you've created your function then you just need to call it from the Cookie Control setup script. Here's an example of how this can be done:

<script type="text/javascript">
    t: {
        title: '<p>This site uses cookies to store information on your computer.</p>',
        intro: '<p>Some of these cookies are essential.....</p>',
        full:'<p>These cookies are set when you submit a form... </p>'
    theme:CookieControl.THEME_LIGHT, // light or dark
    startOpen: false,
    protectedCookies: [], // list the cookies you do not want deleted, for example ['analytics', 'twitter']
    apiKey: 'XXX',
    product: CookieControl.PROD_PAID_MULTISITE,
    consentModel: CookieControl.MODEL_INFO,
    onAccept:function(){ccAddAnalytics(); },
    countries:'United Kingdom,Netherlands,Greece' // Or supply a list, like ['United Kingdom', 'Greece']

Useful Functions

Cookie Control provides a number of functions that allow you to check if you can set cookies from the rest of your scripts. These are:

  • CookieControl.cookieLawApplies(): This function checks if the cookie Law applies to the user that is accessing the site based on their location.
  • CookieControl.consented(): This function checks that the user has consented to getting cookies.
  • CookieControl.maySendCookies(): This function is a combination of the first two checks. Furthermore, this function will be updated as the law changes to include all the checks that are needed in order to set a cookie and therefore it is the one that is recommended to be used when checking if cookies can be set.
  • CookieControl.reset();: This functions removes the cookies set when the user has given consent and can in effect be used to revoke consent.

Please ensure that the Cookie Control script has loaded before these functions are called.

Including Cookie Control based on the user location

This is now part of the main configuration of Cookie Control. All you need to do is provide the list of countries that you wich Cookie Control to be applied for. That's all!

Cookie Deletion

Within the both the explicit and implicit modes, Cookie Control will attempt to delete all the cookies belonging to the same domain when the option ‘cookies are off’ is selected .

Session cookies and cookies belonging to a different domains can not be deleted by Cookie Control. You will need to write custom logic to remove those cookies.

If you do not want specific cookies to be deleted you can list the cookies names in the protected cookies section of the configuration.

Cookie audits and privacy policy

The simplest way of doing this is using a browser extension. Browser extensions for capturing cookie information and making it available through your browser interface are available for all major browsers. We've got on well using an extension for Firefox, but there are others.

Once you've installed the necessary extension, walk through your site, checking the growing cookie list as you go. As a webmaster you should have a good idea what all of these do. If you don't you may need to consult whoever put your site together.

Make a table consisting of the cookie name, its function, and if you can, its expiry date. It's this data that you need to include in your privacy policy. Make sure that this is all in plain English. You won't be helping your users unless you translate the technical-speak.

Remember to include the cookie: "civicAllowCookies"

This is the cookie stored by Cookie Control when a user agrees to have cookies stored on their machine.

If you're looking for sample privacy policies, you could do worse than checking out the ICO's own policy or CIVIC's privacy statement.

Dealing with the "Sorry, this api key is not valid." error.

If you have just deployed Cookie Control on your website and are seeing an alert box with the error: "Civic Cookie Control: Sorry, this api key is not valid. Please contact Civic at We apologise for the inconvenience.", the most probable reason is that you have specified a domain different from the one you are actually trying to use. For example, you might have specified the domain, but you are trying to deploy Cookie control on, or vice versa.

You can login in to the configuration page again and specify the correct domain.

How to redirect non-www URLs to www, or vice versa?

So at the moment you have your site served from both, and How can you redirect one to the other? Note that you have to do so not just for Cookie Control to stop complaining, but also for SEO purposes.

In order to redirect any request for to, you should set the appropriate rewrite rule. Adding the following at the beginning of your .htaccess file (usually in the public_html folder on your server) will do the trick:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^ [NC]
RewriteRule ^(.*)$$1 [L,R=301]

Similarly, adding the following in the same file, will redirect everyone coming at to

RewriteEngine On
RewriteCond %{HTTP_HOST} ^ [NC]
RewriteRule ^(.*)$$1 [L,R=301]

So pick one of the above, depending on whether you prefer your site's entry point to be the domain with the www, or without it.


If there's any aspect of Cookie Control that you want help with, if you need assistance deploying it, or have a feature request, please visit the support forum and search for an answer. If you can't find what you're looking for post a question over there and we'll answer as quickly as we can.

Please note that due to client deadlines etc this is the only means by which we can offer free support for Cookie Control.

Stay connected with us. Follow us on: