Thanks for downloading Cookie Law Info!

Cookie Law Info is ready to go in 2 minutes and you can style it to look just like your own website – you don’t have to settle for somebody else’s design choice, neither do you have to be a pro designer! To get started:

  • Download it here
  • In the admin panel, add your Privacy & Cookies Policy URL
  • Done – it’s that simple!

If you want to customize it further you can:

  • Edit the message text and buttons
  • Style the cookie bar to look just like your own website
  • Place the cookie bar in the header or in the footer
  • Change the animation on page load and cookie bar close
  • Choose to use the “show again” tab and decide where it is positioned (the always-visible link in the header/footer – by default this is switched on and says “Privacy and Cookies Policy”)
  • Add a smart cookies table to your Privacy & Cookies Policy page
  • Customise the CSS

If you need help writing a Privacy & Cookies Policy page, then Cookie Law Info helps too:

Finally, if you’re having trouble getting it working you can look through the support forums, check out the troubleshooting guide or request a new feature or customized version.


Basic Workflow of the plugin

When the cookie bar is enabled, the users on the front-end will be shown a message bar that allows them to accept or reject the cookies being used on the website. Based on this consent, i.e., if the users have accepted,  the scripts related to the cookies that have been added into the plugin added into the website. If the user rejects the cookies at any point of time these scripts will not be rendered on the website.

How to Add the Cookies and Its Data to the Plugin?

For this, first, you need to identify the cookies being used on the website. This can be done from the developer console of any popular browsers. After identifying the cookies, add the cookies being used into the GDPR Cookie Consent plugin.

The cookies should be added to the plugin from the Add New page in the plugin. From this page, add all the cookie details. The following are the data required by the plugin when a new cookie is being added.

  • Cookie Title – Add the title of the cookie. This field is for audit purposes, so this field allows you to add the name of the cookie in a user-friendly manner.
  • Cookie description – This allows you to add the description of the plugin so that you can explain what the purpose of the cookie is, what it does, what data it collects, etc.
  • Cookie Type – This is to indicate the type of the cookie. The types include persistent, session, or third-party. Persistent cookies are those that generally persists even after the browser is closed. Session cookies are those cookies that will expire when the session is over. Third-party cookies are the cookies are the cookies that are installed by third-party services being used on the website.
  • Cookie Duration – This is the time duration the cookies will be active on the browser. The easiest way to find out the duration of a cookie is from the developer console of the browser.
  • Cookie Sensitivity – Cookies are either necessary or non-necessary. The necessary cookies are those cookies that, as the name indicates, are absolutely necessary for the website to function in its intended way. The users do not have the control to disable this category of the cookies. The non-necessary cookies are those cookies whose scripts need to be added in the plugin and that the users can enable/disable.

After the cookies have been added to the plugin, the cookies will be listed on the Cookie List page.

The next most important step to do is to add the scripts for the non-necessary cookies. In the GDPR plugin, the scripts can be added to the Non-necessary Cookies page. These scripts will be rendered on the website based on the user consent. You can either add the cookies on the head section of the website or the body section of the website.

This is pretty much it when it comes to setting up the functionality of the plugin.

How to check whether the scripts are being rendered or not?

When the users record their consent either by clicking on the Accept or the Reject button, the GDPR cookie consent plugin installs a cookie named viewed_cookie_policy.  This cookie only stores the value ‘yes’ on the accept event and ‘no’ on reject. The value set for the cookie can be viewed from the developer console of the browser.

To check whether the scripts are being added on the website or not, check the source code of the website before and after recording the consent. Prior to giving consent the scripts of the cookies will not be added in the head/body section of the plugin. After giving consent, if the user accepts the cookies, the scripts can be seen either on the head/body section in the page source code. If the user has rejected the cookies the scripts will not be added to the pages and can not be seen in the page source.

Customizing Cookie Bar – The Cookie Law Settings Page

The settings page is hopefully intuitive but I know from my own experience that sometimes no matter how much you stare at the screen, something isn’t working and you don’t know why! The full range of settings is covered here.

The settings page of the GDPR Cookie Consent plugin looks as follows.

Cookie Law Settings page

The settings are divided into 4 sections – Settings, Cookie Law Message Bar, Customize Buttons, Using the Shortcodes, and Advanced. Let’s go through each and every one of them.

The Settings Section

Following are the fields in the settings section:

Cookie Consent General Settings

  1. The cookie bar is currently: This fields allows you to enable or disable the cookie bar on your website.
  2. Reject button: Enable/disable the Reject button the message bar. By disabling this option you only allow the users to accept the cookies on your website.
  3. Cookie bar will be shown in: This field allows you to set the cookie bar either in the top or bottom section of the screen.
  4. Fix Cookie Bar to Header: If you have placed the cookie bar on the top of the screen, this option will stick the cookie bar at the top of the screen. It will have no effect if the cookie bar is placed on the bottom.
  5. On load: This option allows you to either animate or make it sticky on loading the website.
  6. On hide: This option allows you to either animate or disappear the cookie bar when the cookie bar hides.
  7. Auto-hide cookie bar after delay: When this option is set to yes, the cookie bar will hide, accepting the cookies, after the time duration specified in milliseconds in the Milliseconds until hidden field.
  8. Reload after “scroll accept” event: Choosing yes for this option will reload the page automatically when the cookies are accepted on page scroll.
  9. Reload on Accept Button Click: Choosing yes reloads the webpage automatically when the user clicks on the accept button.
  10. Use Show Again Tab?: When switched on, a tab appears at the bottom end of the screen when the message bar hide. Clicking on the tab, the user can revisit the message bar and if they wish, they can change their consent.
  11. Tab Position: Specify which end, left or right, of the screen you want the show again tab to appear.
  12. From left margin: Here you need to add either “px” or “%” to say how far from the respective margin on the screen you want the show again tab. It is important to add the suffix ‘px’. Adding any other value like ‘pixels’ or no value at all will not produce the desired result.
  13. Show More Text: From this field, you can change the text shown in the show again tab to say “Cookie Notice” or whatever you like.

Cookie Bar Message Section

This is straightforward. The cookie bar message section looks as below.

Cookie message bar settings

  1. Message: You can add the text to the cookie bar here. Some HTML is allowed, including: a, u, b, br, div, em, i, img, p, span, strong. Note that potentially ‘dangerous’ attributes and all JavaScript will be filtered out. This is for security reasons. Line breaks will be replaced by the HTML tag <br />.
    Accept button, Reject button, or Read more links are placed in the cookie bar using shortcodes. More about the shortcodes in the Shortcodes section later in the article.
  2. Cookie Bar Color: Lets you change the color of the cookie bar. You can choose a color that matches the theme of your website.
  3. Text Color: Allows you to change the color of the text.
  4. Show Border?: Allows you to switch on/off the border between the cookie bar and the main website content.
  5. Border Color: Change the color of the border
  6. Font: Change the font of the text in the message bar. By default, it will take the default theme font.

Customize Buttons Section

This section allows you to style up the buttons of the cookie bar. The following is the screenshot of the Customize Button section.

Cookie law settings customize buttons

The settings for customizing the Accept button (shortcode [cookie_button]), the Reject button (shortcode [cookie_reject]), and the read more link are as follows:

  1. Link Text: Lets you change the text of the button.
  2. Action: There are two actions that can be performed when the button is clicked. The first is close header – This will close the cookie when the button is clicked. The second option is open URL, which will open the URL specified in the Link URL field. This option is not available for the Read more link and it will appear as a link.
  3. Open link in new window: If the but is set to open a URL, this option will allow you to open the URL on a new tab.
  4. Link color: Lets you change the color of the link
  5. Show as button?: Lets you choose whether you want the shortcode to appear as buttons or as links.
  6. Button Color: Choose the color of the button from the color picker.
  7. Button Size: Choose the size of the button from Extra large, large, medium, or small.

Finally – remember to update the link URL in the “read more” link with the actual URL of your cookie policy.

The Shortcodes section

This section explains all the shortcodes that are used in the GDPR Cookie Consent plugin. Following are the shortcodes used in the plugin and what you can achieve using these shortcodes. These shortcodes can be used anywhere on the webpage, not just the cookie bar.

Cookie law settings shortcode

  1. [cookie_button]: adds the Accept button and the Reject button. If the Reject button option on the Cookie Law Settings page is turned off, it will only add an Accept button.
  2. Read More: The shortcode to add the read more link.
  3. Reject: This shortcode adds the Reject button that can be customized from the Setting page.
  4. Accept: This shortcode adds an Accept button that already styled, in green color, and closes the header when clicked on.
  5. Accept: You can change the color of the Accept button from the set of pre-defined value for colour attribute. You can choose from the colors red, blue, yellow, orange, green, or pink. Make sure to use the UK spelling of ‘colour’.
  6. Delete Cookies or click here to delete: This shortcode deletes the cookie set by the Cookie Consent plugin. Note that this does NOT delete all cookies, it just deletes the viewed_cookie_policy cookie that Cookie Law Info uses to remember if a visitor has closed the header or not.
  7. Read More: will add the read more link that you can customize and link to your privacy policy page.
  8. CookieTypeDurationDescription
    :
    This will add all the cookies added into the plugin and its related information in a tabular format.

Advanced Section

Sometimes the theme of your website clash with the settings of the plugin. In these circumstances, you can try adjusting these settings. The Reset All Values field allows you to delete all the settings of the plugin and reset it to its default settings.

Cookie law settings - advanced settings page

The Cookie Audit Table

The GDPR Cookie Law requires that the users should be notified of the cookies that are being used by the website, what their purpose is, how they are used, what data they collect. The Cookie Consent plugin allows you to display all the cookies added to the plugin in a simple tabular format, Using the shortcode

CookieTypeDurationDescription
.

You can use this shortcode anywhere on the website. The shortcode will help you to display all the cookies in your Privacy Policy page.

You can style up the audit table on your Privacy & Cookie Policy page using the style attribute. For example,

CookieTypeDurationDescription
. You can choose from the following styles: simple, classic, modern, rounded, elegant, and winter. By default, the style of the table is classic.

If you use the attribute the not_shown_message, if there are no cookies added in the plugin, the audit table will display the message within the attribute. If there are cookies added, it will display the list of cookies. For example, 

CookieTypeDurationDescription
No records found
.

Custom CSS

As a designer, the last thing you want on your website is somebody else’s graphic design, branding or logo spoiling your hard work. If the Cookie Law Info settings aren’t enough for you here are some tips on styling up your Cookie Bar.

Note – you’ll need to be familiar with HTML, CSS and PHP / WordPress. But that’s why you’re reading this section, right?

If you come up with something cool why not share it? Get in touch via the contact form. I can update the main plugin with your feature/setting and I’ll happily add your name in the credits.

Styles are set in 4 places:

  • cli-tables.css (does what you’d expect – style away here)
  • cli-styles.css
  • cookielawinfo.js
  • shortcodes.php (table and button styles)

Warning – changes you make to core files will be overwritten by future plugin updates.

The HTML produced is W3 compliant and validates.

Want some custom HTML / CSS?

You can edit cli-styles.css for this. I deliberately don’t want too many editing options in the settings page, as that would overcomplicate an already option-packed interface. Hopefully, I’m striking a happy medium here… but if you have a suggestion on improving it just let me know!

The HTML:

&amp;amp;amp;amp;amp;lt;div id="cookie-law-info-bar"&amp;amp;amp;amp;amp;gt;
This website uses cookies to improve your experience. We'll assume you're ok with that, but you can opt-out if you wish.
&amp;amp;amp;amp;amp;lt;a id="cookie_action_close_header" class="medium cli-plugin-button cli-plugin-main-button" href="#"&amp;amp;amp;amp;amp;gt;Accept&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;a id="CONSTANT_OPEN_URL" class="cli-plugin-main-link" href="http://cookielawinfo.com/privacy-and-cookie-policy" target="_new"&amp;amp;amp;amp;amp;gt;Read More&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;div id="cookie-law-info-again"&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;span id="cookie_hdr_showagain"&amp;amp;amp;amp;amp;gt;Privacy &amp;amp;amp;amp;amp;amp;amp; Cookies Policy&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;gt;

Here you’ll see that you can even override the name of the div ID that jQuery hooks onto. You could use this to admire styles as you wish:

The default CSS (current as of version 1.0.2):

#cookie-law-info-bar {
	border: 0;
	font-size: 10pt;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	width: 100%;
	z-index: 9999;
}
#cookie-law-info-again {
	font-size: 10pt;
	margin: 0;
	padding: 2px 10px;
	text-align: center;
	z-index: 9999;
	cursor: pointer;
}
#cookie-law-info-bar span {
	vertical-align: middle;
}

You can easily change the text-align (in #cookie-law-info-bar) to “text-align: left” for example, or make the cookie bar taller/slimmer by increasing or decreasing the padding. Plenty of options here.

Want a different style of the table for the Privacy & Cookie Policy page?

No problem, getting different colors, fewer columns, or a different layout is straightforward- just edit shortcodes.php to output the HTML you want. You can pull from the custom posts/custom post meta as required – or not at all, if you want to only show a table of cookie name and description, for example. Check out custom-post-meta.php to see what fields are available.

What some custom header positioning or animation effects?

Cookie Law Info passes a JSON object of settings to jQuery, where some styles are applied. These include things like x and y positioning, animation settings, delays, and so on. You could easily customize the script by overriding some settings. This is definitely for the intermediate/advanced though- if you do go off piste I might not be able to support your plugin.

Styling the buttons

Buttons are based on: http://papermashup.com/demos/css-buttons which should give you a good starting place. Note that within functions.php the function su_hex_shift() is used to make the rollover color of the button 20% darker.

FYI – the Cookie Law Info cookie is a persistent cookie called “viewed_cookie_policy” and is set for 365 days. It is used to remember whether the visitor has “accepted” your cookie policy (i.e. chosen to close the header). If set it contains the word “yes”. Clearly, it doesn’t track anybody’s personal data.

Troubleshooting

Something not working? Please see the complete troubleshooting guide.

1 response on this

  1. Pingback: Provvedimento sui Cookie dei Siti Web

Leave a Reply

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