Cookillian Alert styling: Simple Implied Consent

on June 13, 2012 in Projects with 1 comment by

Cookillian is very flexible and allows you to fully customize the alert that will be displayed as well as how it handles consent.

Here I will provide an example for a simple, unobtrusive alert at the bottom (or top) of a page, with an option to opt out of receiving cookies. This is a commonly used method for implied consent across major websites in the United Kingdom.

It also shows how to use Cookillian’s API to make an AJAX call, yet provide backward compatibility with browsers that do not use JavaScript.

Setup

This styling is divided in two parts, one that provides the HTML code, and another the CSS styling. We first need to access the Settings screen (Settings -> Cookies) and set both Alert Content and Alert Styling options to Custom. This will provide us with two new large fields where we can add the code necessary.

As this alert style is geared towards implied consent, you may also want to tick the box Implied Consent, which will hide the alert if the visitor accesses any other page (by opting the user in). And under the heading Advanced Options, you have the option to delete cookies if the visitor specifically opts out.

CSS Code

For the Custom Alert Style we use the following code:

.cookillian-alert {

  position: fixed;
  bottom:0;
  left:0;
  z-index:10000;
  width:100%;
  border-top:1px solid #000;
  color: #000;
  background-color: #eee;
}
.cookillian-alert-inside {
  padding: 5px;
  text-align: center;
}

This will ensure that the alert will “stick” to the bottom of the screen, above all other content. If you find that the alert is still covered, you need to increase the z-index value. And if you’d rather wish to have the alert appear at the top of the screen, replace “bottom: 0;” with “top: 0;” and “border-top” with “border-bottom”.

Cookillian always wraps the HTML code inside a <div> element with the class cookillian-alert.

HTML Code

Under the heading Content, you can add the following HTML code in the large Custom Alert Code field:

<div class="cookillian-alert-inside">
Just to let you know, this website uses cookies and you can read more about them <a href="#">here</a>. If you'd rather not want this, <a href="?cookillian_resp=0" onclick="try{cookillian.optOut();jQuery('.cookillian-alert').fadeOut('slow');return false;}catch(e){}">Click here</a>.
</div>

Obviously you are free to change the text to meet your needs. Just be sure to change the link to the information about the cookies (currently a hash [#] sign).

The “Click Here” linke contains an onclick attribute that executes a little JavaScript if its available:

  1. In the background, it first opts the user out of receiving cookies – so that the visited page does not need to be refreshed.
  2. It hides the alert in a fading motion.

If JavaScript is not available, then it will use Cookillian’s ability to opt a visitor out by URL. This will ensure that anyone can opt out, regardless of their browser capability.

One comment

  1. posted on Feb 12, 2014 at 7:41 PM  |  reply

    Veeeery useful tips, I’ve used them on my page. Thanks a lot!

Join the discussion

Your email address will not be published. Required fields are marked *