Since 2012 there’s a European Union regulation that requires websites to notify their visitors if they place any cookies in their visitors’ browsers. You’ve probably seen such notifications and to many people they seem just an annoyance. But with the stricter EU privacy laws from 2018 and 2019, it may be important for your website to display such a notification. In this article we look at two nice and simple ways to implement a cookie notification on your website.
In a nutshell, cookies are little snippets of code that websites place in your browser to them remember stuff. Most websites need them. If your website uses any kind of analytics or social sharing functionality, it almost surely places cookies. There’s a really nice and succinct explanation on the Cookies & You website (have a look at the video, it’s nice).
2 Easy ways of setting up a cookie notification on your (WordPress) website
Quite a few talented developers have worked hard to make it easy to setup a cookie notification on your website. If you run a WordPress website, there are several plugins that can help you. And there’s also a free and open source cookie solution for all websites (including WordPress sites) that we really like.
Method 1: Displaying a cookie notification with a WordPress plugin
There are several good WordPress plugins to notify visitors of cookies on your website. If you search in the WordPress plugin directory for ‘cookie consent’, you’ll find several dozens. It’s always good to choose one that’s in active development and that has good ratings. There are a few very popular ones and they would be an excellent choice. But we like a lesser known plugin called Responsive Cookie Consent, because it’s simple and lightweight and you can easily customise the styling to match your site.
Installing the plugin
To install it login to your WordPress dashboard and go to ‘plugins > add new’, like so:
In the search-box type ‘Responsive Cookie Consent’ to find the plugin and then click the ‘install’ button.
Wait a few moments until the plugin is installed and then click the activate button. The plugin is now active on your site and only need to make a few settings to make it work.
Setting up the plugin
To setup the plugin navigate to ‘Settings > RCC’, to open up the plugin’s settings page.
There are a few settings you need to make. To start under ‘Display’, check the boxes for ‘Enable the Cookie Consent Bar’ and ‘Display at bottom of screen (Use this option if your theme is using a fixed header)’.
Finally, under ‘Styling’, set the colours to match those of your site. Now save your settings and you’re done.
Method 2: Display a cookie notification with a third-party script
We personally prefer this approach over the plugin route, because it’s nice and elegant and also has more styling options – so you can make your cookie notification blend in very well with your site.
To start go to the Osano Website and click the link “Download Open Source” next to the button. After that, click “start coding” at the bottom of the table underneath the column “Open Source Edition”.
Customizing your cookie notification
By making settings in the different dropdowns on the left you can now configure your Cookie Notification. You can go through the steps until you’re satisfied with the result. Or you can follow our recommended settings:
- Under position, choose floating left
- Under layout, choose Edgeless
- Under Palette, create your own by settings by setting for the Banner field #ffffff (this is white), for banner text #333333 (this is very dark grey), for the button field, set the button colour you used for your website (or another colour if you’d like to use something else), and the button text colour can stay white.
- Under Learn more link, choose Link to your own Policy, and place the link in the box
- Once you have made all these settings head to the next section ” getting it on your website”
Getting it onto your website
When you’re done customizing, you need to get this notification onto your own site. On the right there are two boxes with code – that’s what you need.
But let’s now first go to your website’s dashboard so you have somewhere to copy this to ; )
If you use the Divi theme
If you use Divi the next step is super-easy, also see the screenshot below:
- Navigate to Divi Theme Options
- Go to the ‘Integration’ tab
- Make sure header code is enabled
- Make sure body code is enabled
- Paste the HTML code you just copied from the Osano site into the < head > code box (just click the copy HTML button, and then click in the box and Ctrl + V to paste it)
- Paste the other code (Body Code) from the Osano site into the <body > code box (not visible in the screenshot but present just below the other box).
- Save your changes and you’re done.
If you ever want to make any changes, you can go to the Cookie Consent site again and generate a new code. Then just overwrite the code from step 4 above.
If you don’t use Divi
If you use a different theme, it may well have similar functionality and allow you to paste in the code into your site’s header just like Divi. Check your theme documentation to find out.
Alternatively, there a nice plugin that lets you add code to your site’s header and footer easily: Head, Footer and Post Injections. Install that and add your code (check the plugin documentation if you’re not sure how).
If you’re a web-developer with access to your site’s theme files you can also consider placing the code manually directly in your theme’s header file or through a must-use plugin.
More info & Free GDPR Checklist
We hope the info here helps you to set up a cookie notification for your website, one of the steps towards GDPR compliance. There is more to GDPR than just your website:
Checklist for all GDPR related things you need to do for your biz
Please note that we earn a small commission if you decide to buy the legal pack from Suzanne through our referral here :)