EU Cookie Compliance Fader for Dynamik Website Builder

Back in June of 2012 we offered the WP Cookie Consent Plugin. The plugin is aimed at providing WordPress developers with a quick bootstrap for adding EU cookie compliance to their websites. We released the plugin hot on the heels of the introduction of EU Cookie Law to the UK, before a wider range of implementation options were evident online. A year and a half on, we’d like to offer another option, our EU Cookie Fader. The fader follows a less strict interpretation of EU Cookie Law and is similar to a variety of standard implementations.

The advantages of our EU Cookie Compliance Fader include:

Lightweight, easy to customise code

Your site works within the law AND you get all your Analytics data

Perfect for WordPress developers and especially suited to users of the Dynamik Website Builder

The EU Cookie Compliance Fader warns users that cookies are used and directs users to the privacy and cookie policy to learn more. It also indicates that the user’s consent for cookies is implied by continued use of the site. This is a conventional interpretation of the EU Cookie Law and up to this point the ICO has not indicated that it is unacceptable. Gaining users’ consent in this way helps our sites maintain better Analytics data, as a more strict interpretation that requires users’ action to use anonymous tracking software can reduce the effectiveness of your site’s data collection.

EU Cookie Compliance Fader Code

There are two elements to the Fader:

the PHP/JavaScript to display and fade out the cookie warning message

the CSS to style the cookie warning message

Here’s the code; we’ll get to how to use it with your site in a moment.

<p>By using our site,you consent toour useof cookies.Tolearn more about how we usecookies,read our<ahref="/privacy-policy/">PrivacyPolicy</a></p>

</div>

</div>

<?php}?>

The PHP and jQuery code has 3 main purposes:

Display a cookie warning

Fade out the cookie warning

Check and set a cookie storing information on the user’s awareness of the site’s use of cookies

The code begins with PHP checking the user’s browser for the existence of a cookie called eucookie. If the eucookie has not been set (or it is expired), the cookie warning will be displayed. jQuery’s fading function is invoked to show and then fade out the cookie warning. A JavaScript function, SetCookie, then creates eucookie with the expiry that is passed as parameter to SetCookie.

CSS

CSS

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

27

28

29

30

31

32

33

34

35

36

37

38

/*** Cookie Compliance ***/

#cookie-message {

background-color:#000000;

bottom:0;

color:#ffffff;

font-size:12px;

left:0;

line-height:18px;

margin:20px;

max-width:85%;

position:absolute;

width:400px;

z-index:100;

}

#cookie-message h3 {

background-color:#000000;

font-family:Cabin,Helvetica,sans-serif;

font-size:33px;

font-weight:normal;

line-height:33px;

margin:20px20px020px;

padding-bottom:5px;

text-align:center;

text-transform:uppercase;

}

.cookie-message-wrap {

padding:10px20px20px20px;

}

#cookie-message p:first-child {

margin-bottom:10px;

}

#cookie-message a, #cookie-message a:visited {

color:#ffffff;

text-decoration:underline;

}

#cookie-message a:hover {

text-decoration:none;

}

The CSS creates a black box with white text and displays the box in the bottom left of the user’s screen. The CSS is fully responsive, and displays well across screen sizes. Fonts, colours, use of white-space and all other customisations may be modified by revising the CSS to suit your site’s style.

Use It

We build our sites using the Genesis Theme Framework and Dynamik Website Builder or Genesis Extender. We take advantage of Dynamik’s flexibility and excellent and robust code and add our own CSS and custom PHP on top. Our EU Cookie Compliance Fader can be used by any WordPress developer, though it is especially straightforward to use when working with the Dynamik Website Builder.

Step 1: Create Your Hook Box

You’ll need to add the PHP and JavaScript to your site. This can be done in Dynamik:

Go to Dynamik Custom > Hook Boxes

Click Add

Name your new hook box in the Name field

Choose wp-head from the Hook dropdown

Copy and paste in the PHP/JavaScript from above

Customise the cookie warning text for your site

Save Changes

Step 2: Add Your CSS

You’ll also need to add the CSS, like so:

Go to Dynamik Custom > CSS

Copy and paste in the CSS from above, including any of your own refinements

Save Changes

That’s it, you’re done! Well, almost. In addition to a clear warning about your site’s use of cookies you should also have a clearly written privacy and cookies policy that outlines their use for a lay-person. Here’s the text we use, you’re welcome to it:

XHTML

1

2

3

4

5

6

7

<h2>How We Use Cookies</h2>

<p>We use cookies, small files that are stored on your computer, in order to allow our site to function properly as well as to evaluate and improve the experience and performance of our site. We use cookies in 3 ways:</p>

<ol>

<li><strong>Analytical purposes</strong> We use cookies to measure visitor behaviour so that we can improve and enhance the site. This information is anonymised.</li>

<li><strong>Functional purposes</strong> The WordPress software that powers our site relies on non-tracking cookies in order to function properly.</li>

<li><strong>User preferences</strong> Part of our work to comply with EU directives on disclosure of cookie use, is to offer a pop-up in order to gain user consent to use cookies as described in points 1 and 2. We store use a cookie to remember a user's consent preference.</li>

</ol>

Phew! Now you’re done. We hope you can use our EU Cookie Compliance Fader in good health. If you enjoyed this post and would like to read more from us, why not subscribe to our free feed?