How to install a simple cookie consent banner on wordpress

You’ve seen them on every website, these banners popping up as soon as you enter asking your consent before continuing. A Cookie Consent Banner is a must-have nowadays.

If you are wondering why this is actually necessary nowadays, please go ahead and check out my post about the GDPR for an explanation on why you need to take GDPR seriously for your website or blog even if you are not selling anything or collecting a mailing list.

In this article I will keep it short and sweet (haha failed!), and let you guys see how to simply add this banner onto your WordPress site.

(Pssst, scroll to the end to download the PDF version of this post!)

 

How-to-install-cookie-concent-banner-wordpress-04

First, what are cookies?

I always found the word cookies both sweet, and confusing. I mean, we all know what cookies are, you have chocolate chip for instance, and they taste divine!

But we are not talking about a cookie recipe here, these cookies are more dry and virtual.

These cookies are small text files that are used to store small pieces of information. When a website is loaded on your browser, the cookies are stored on your device.

The cookies then help to provide a better user experience, to understand how the website performs and analyze the statistics. Marketing cookies are used to track your movements online, and to show you more targeted ads.

E.g. how miraculously after I browse for certain a kind of shoes online, my Facebook feed all of a sudden knows to show me those exact shoes in ads. Could be creepy, but could also be convenient. You decide.

 

How to install a Cookie Consent Banner on WordPress

Because of GDPR, we need to have a consent from our web users, and they need to be able to choose what data your website stores. So to be GDPR compliant, you need a cookie banner on your website.

For my WordPress I have used the plugin called “GDPR Cookie Consent”, which is a free download and pretty customizable. Let’s go through the steps how you can easily set this up on your WordPress.

It will look something like this:

#1 Download and install the FREE “GDPR Cookie Consent” Plugin

You can find the plugin here. Simply save it on your computer, go to your WordPress account and select Plugins: Add New.

You’ll want to select “Upload plugin”, browse to find the file on your computer, and hit “Install now.”

#2 General Settings for your Cookie Consent Banner

After installation is activated, you’ll see the “GDPR Cookie Consent” on your WordPress Menu on the left side as its own item. It’s time to start modifying your banner and making sure it fits your brand.

General

The first menu item on your GDPR Cookie Consent menu is “Cookie Consent Settings.”

The first tab open is “General”, and here you can modify the following under the first section, “Cookie Bar”:

Cookie bar is currently on or off (do you want the banner to show, or not). So make sure it’s ON.

You can choose if you want to see the Cookie bar as a banner, pop-up window, or a widget. I have chosen a banner, which shows up at the bottom of my page, in the Footer.

You can also choose it appear in the Header, on top of the page. If you choose a pop-up you can choose whether this will be done with an overlay or not. Basically if you choose an overlay, the rest of the site is blurred or blocked until the user makes a choice and clicks the Cookie bar.

A sure way of users not surfing further without checking out those cookies. Both have their benefits, up to you how you want this to be shown on your site.

You can choose if this is Sticky or Animated, meaning static or with some kind of movement. I chose Static here when the page loads, and animated on hide (I think those were also the standard settings).

Then it asks if you want to automatically hide the cookie bar after a while, assuming that you have consent since the person is still there. I have chosen NO here, because I do want an action from the user consenting to the cookies.

Same with the question if you want to make the assumption that user accepts by scrolling down. You know what assuming makes us?

Show Again tab

The “Show Again tab” is a tab at the bottom of your page that you can install to be visible all the time, or not.

Here I have it active, which means that even if you consented to the cookies when entering the site, you can always find the Cookie policy back when you want.

You can choose to have this on or off, to have it shown on the right or left side of your site, how much from the sides you want it (standard 100px), and you can modify the text of the tab as well.

Remember to hit “Update Settings” every once in a while.

 Here above you see the tab on the lower right hand corner.  

Other

Here you can choose whether you want the banner to re-load after accepting by scrolling, reload the banner after the Accept button has been clicked, or reload after Reject button has been clicked.

I chose NO for all, since for me it’s enough that it’s seen once, there is an action needed from the user, and the Cookie policy is visible all the time as a tab.

#3 Customize Cookie bar

Then it’s time to customize the cookie bar to make sure it matches the rest of your website.

You can choose a Heading for your banner or message. I have actually left it empty, I found that the actual text was enough.

You can customize the message for the banner. I have left it standard.

You can customize the Cookie Bar color by selecting one of the standard colors, or selecting a color you use for your brand. For me it’s selected as the gray-green I use a lot on my site.

Same with text color, this you can customize as well.

There are few font options, but it also uses the Default theme font if you choose that one.

You can add other options onto your Cookie banner, such as the option “Reject” and “Read more” which are not added per default.

After modifying your  buttons below, you can copy the short link (so ‘cookie_reject’ and ‘cookie_settings’) which you see on the gray background, and paste them here after the text (after the …”5px]).

Remember to take the [ ] symbols also with you when copying. This will make the chosen buttons / links appear also on the Cookie banner.

 

#4 Customize Cookie Consent Banner Buttons

The next step is to customize the buttons shown. There are four sections here, Accept button, Reject button, Settings button, and Read More Link.

Main button

You can modify the text of the main button, but please keep it clear so that users know it’s the button that indicates they accept the Cookie policy.

You can modify the text color and the button color. Here I’m using the same color button as I use on my website in general, to keep it consistent.

There is a choice to show this as a link or a button. I think button is slightly clearer, so hence my choice for that on my banner.

You can choose what happens when customer clicks on the button. I have chosen that the banner will be closed, but you can also choose to open another URL, for example your Cookie Policy page (more on that later).

You can also choose the size of the button, varying from small to XL.

Reject button

The Reject button has the same choices for layout.

Settings button

The settings button links to your Cookie settings information, and you can choose this to be a link, or a button. Here I have chosen it to be a link, and the link color and size can be customized.

The link will lead the user to your Cookie settings, which is a pop-up. In this pop-up the user can choose which cookies they consent to; only the necessary cookies, or also the Non-necessary cookies, such as used for marketing purposes.

Read more Link

The Read More Link directs to your Privacy policy page, or your Cookie policy page. You can choose to show this as a button or as a link, and enter the page where it should direct to. The plugin asks if this is a page, or a link.

When you select a page, you will get a drop-down of all of the pages on your WordPress site. Just select your Cookie policy page (which we’ll be making in a minute), or your Privacy policy page if you already have one.

#5 Advanced Cookie Consent Banner settings

The Advanced tab allows you to reset all of the values to the basic settings.

#6 Help Guide

Under this tab you’ll find short codes should you need them, and Help documents links for more information. The short codes you can copy-paste on the Cookie bar message, see #3 Customize Cookie bar.

 

#7 Cookie List

In order to comply with the GDPR and the Cookie law, websites have to inform users what kind of cookies they are using.

This means that you have to know what cookies your site is using, and you have to let the users decide whether they want to consent to all of the cookies, or only the

Necessary cookies (performance related for example, but not marketing or analytics Cookies). The user should find information about the cookies, what they are used for, and for how long they are stored for.

To find out what Cookies you have on your site, you can use the free tool via CookieServe for example.

When you enter your domain and press “Find Cookies”, the site will generate a list of Cookies you have, the description of each Cookie, duration and the type.

Some are used for performance, and some are used for Google Analytics for example.

As you can see, my list of cookies is not so long, just for Google Analytics and performance.

What you can then do, is to go back your GDPR Cookie Consent menu, and select Cookie list. Here you can add the information you received from the cookieserve by selecting the “Add new” button.

You add the name of the Cookie as a title, the description in the text field, and on the right hand side you can add a ID for the cookie (I just used the name), the type of the cookie (GDPR, Analytics, 3rd party cookie etc), duration of how long it is stored, and the sensitivity (whether it’s necessary or non-necessary).

Then eventually you will have a list of your cookies showing as below.

#8 Policy Generator

Ok, now we get to the good stuff of creating a Cookie policy for you, if you don’t already have one. This can be then accessed via a link on your Cookie Consent Banner. 

If you select “Policy Generator” from the plugin menu, you will see a screen as below (except when you do this for the first time you will not have the button “Update existing cookie policy page” as this appears only when you have already generated a page).

As you can see, it’s already pre-populated for you. On the left hand side you can see all of the different paragraphs that are generated, and you can choose to exclude some of them if you wish.

By clicking on the blocks on the left side you can see the content of that block appearing on the text field.

Make sure to add your website there where it says “Your consent applies to the following domains”

If you are OK with the text, you can hit “Create Cookie Policy Page.” After this you can modify the page according to your WordPress template and style.

Make sure to add it into the footer menu, or in any other menu where you want this page to appear, if you want it to be easily accessible all the time. 

Some of the fields are automatically generated. You see for example below, within the What types of cookies do we use “The below list details the cookies used in our website.”

If you have added your list of cookies into the plugin as in #7, the list of cookies will appear here on the actual Cookie Policy page.

Also the customer consent status will appear for the user based on what preference they chose.

Handy, huh? 

Above you see the adjusted banner with Accept and Reject buttons. 

#9 Non-necessary cookies

Here you can choose whether you want to able or enable the non-necessary cookies. By default there is already a description of what kind of cookies these include.

#10 Necessary cookies

The necessary cookies also include a ready-made description of what they are, and what they are used for. You can leave as is, or modify if you wish.

#11 Privacy Overview

The Privacy overview is the text that appears on the pop-up when the Cookie Settings is selected from the Cookie banner.

As with the other fields, this is pre-populated, and you could leave the text as it is, or modify if you’d like to say something more in your own tone of voice.

That’s your Cookie Consent Banner, guys!

That’s it, we have reached the end. Did you manage to make everything OK?

It’s actually super easy, right? You now have a solid Cookie Consent Banner on your site, congrats!

And it’s good to know that you are GDPR compliant, you have your cookies in a row and you can actually sit back enjoy them yummy chocolate chip cookies to rewards yourself after all this work!

If you have any questions, you know where to find me!

Printable COOKIE CONSENT BANNER GUIDE

Download your Cookie Consent Banner Guide as a handy PDF!

    For GDPR's sake I should inform you that you will be added to my friendly and informative mailing list. But you already knew that, right? 😉 Unsubscribe any time with one click!

    Need help with your website?

    Contact me and let’s work together!

    Hi there, I’m Kaisa

     

     

     

     

    I’m your coach, friend and content creator when you want to get serious with your big & bold Passion Business and set it all online. I’ll help you with tech, branding and courage.

    FREE 10 day Website Kick-Start Challenge

    10-Steps-Workbook-thumbnail-072020

    Don’t forget

    Your free resources

    Do you want to DIY your website, but need some tips and tricks on how to do it? With this FREE Workbook you will learn the 10 easy steps to DIY your own website today!

    I won’t spam! Unsubscribe anytime.