How to add cookie notifications to WordPress
In my post, I show you step by step how to add cookie notifications to WordPress websites. The first method I am going to show you is to use the free plan option offered by Osano.com. The second method is to use open-source code to generate a cookie consent popup.
I will show you step by step how to implement both methods on your blog. The free plan on Osano is limited to 7,500 impressions, but the cookie consent popup has many excellent features. To get started with this method, click on this link ‘Osano free plan option‘.
The open-source option is free and has no limits. To get started with this method, click on this link ‘Open-source cookie consent notification‘.
When I started blogging, I was overwhelmed with all the information I had to take in as a blogger. The secret is to take it one step at a time, adding a cookie consent notification is one of those steps. By the end of my blog post, you will have a cookie consent popup for your site.
Let’s get started.
- Do you need a cookie consent popup?
- Osano free plan option
- How to add an Osano cookie notification to WordPress video tutorial
- Open source cookie consent notification
- How to add an open-source cookie notification video tutorial
- How to check if your cookie notification is working
- Conclusion
- Frequently asked questions
Do you need a cookie consent popup?
If you get visitors to your website from any of the following countries, you need a cookie consent notice on your site. You may target visitors from other countries, but you can not control who comes to your site, therefore, it is better to have a consent popup for your WordPress blog.
| Austria | Italy |
| Belgium | Latvia |
| Bulgaria | Lithuania |
| Croatia | Luxembourg |
| Cyprus | Malta |
| Czechia | Netherlands |
| Denmark | Poland |
| Estonia | Portugal |
| Finland | Romania |
| France | Slovakia |
| Germany | Slovenia |
| Greece | Spain |
| Hungary | Sweden |
| Ireland | United Kingdom |
Osano free plan option
To get started, we are going to head over to https://www.osano.com/cookieconsent, (*Paid link) here is their homepage.
We use Osano to create a unique cookie consent popup for our WordPress blog. Once complete, we get HTML code to put onto our site. I show you later how to put that code onto your website.
Sign up for a free account
To start creating your cookie consent notification, click on the ‘Sign up free’ link.
Next, we come to this page. If your site is new and you don’t have many visitors yet, the free plan is fine with 7,500 monthly consent views.
To get started, click on the ‘Get Basic’ link. After that, complete the form and select next.
On this page, complete your address details.
Finally, to activate your account, accept the terms of service.
Once you activate your account, you get this confirmation message. To continue, check your email account for a link and login details.
Once you sign in for the first time, you are required to change your password, then you can start creating your cookie consent popup.
Advertisement
Customize a cookie consent popup
When you sign in, you are greeted with a 60-second animation introduction to Orano. Then you come to your dashboard.
To start, select ‘Consent Management’.
First, configure your website. To add a website, select the ‘Plus’ icon on the right.
There are two sections to complete, settings and styling. Here is the settings section. Enter a nickname for your website, the URL of the site, and the URL of your privacy policy. If you don’t have a privacy policy page yet, get that for your site first. There are many free templates on the internet you can edit and use.
This is the styling section. Text for your cookie is generated automatically depending on the location of your visitor. Under that, you can choose how long you want the notification to stay on the screen, the default is 10 seconds. Under that, you have the option of a box or banner style and where that will appear on your site.
Use the drop-down menus to customize your cookie consent popup.
At the bottom of styling, you have color options. Use the drop-menu to select your color scheme or customize using the box options.
Preview your cookie consent popup
To see a preview of your popup, click on ‘Show Preview’ on the top-right.
Get the HTML code for your cookie
Once you have finished customizing your cookie, select ‘Create Configuration’.
Then ‘Publish’.
And ‘Clear and Publish’.
There is a short wait while your cookie is being published.
To be compliant, you have to categorize the scripts loaded on your site. To do that, you need to add the cookie code to your site first. I’ll show you how to do that next.
Get the cookie code
To get your code, select the ‘Get Code’ link on the top-right. Then you get this popup, click on ‘Copy’.
Advertisement
How to put the HTML code onto your WordPress site
The best way to put this code onto your website is by using the ‘Headers and footers’ plugin.
Go to the WordPress plugin library through your WordPress admin, and search for ‘Headers and Footers’.
Install and activate this plugin. Once activated, you will have an extra option in your ‘Settings’. Click on ‘Insert Headers and Footers’.
Then you come to this.
There are two boxes available to enter HTML code. One is for code that needs to be in the ‘head’ section, the other box is for code that needs to be in the ‘body’ section.
When we copied the code from Osano, they had instructions on where to put the HTML code.
Therefore, paste the code into the box ‘Scripts in Header’, the top box. If you already have code in this box, ensure this code is at the top, it must be first.
Once you have pasted your code, select ‘Save’.
Categorize scripts loaded on your site
To make your site compliant, return to your Osano dashboard, select your website, and open the ‘Scripts’ tab.
Under this tab, you will find scripts loaded by your site that you need to categorize.
To start, click on the green plus icon to the right. From the choices, select the best category for that script. Do this for all the items on the list. Once completed, select ‘Save Changes’.
Then ‘Publish’.
Finally, select ‘Clear and Publish’.
Activate your cookie consent popup
To activate the cookie popup for your site, you have to change the mode setting. During set up and script categorizing, the default mode is ‘Listening’, that means nothing is activated.
To start, change this setting to ‘Permissive’ or ‘Strict’, then ‘Save Changes’, ‘Publish’, and finally ‘Clear and Publish’.
There is a short wait while your changes are being implemented. Once updated, you get a ‘Live’ message.
Review scripts and cookies
Over the first couple of days, Osano will scan your site and more items will appear in your ‘Scripts’ and ‘Cookies’ list. Go back to these tabs to categorize new items.
How to add an Osano cookie notification to WordPress video tutorial
Open source cookie consent notification
To get started, go to https://www.osano.com/cookieconsent (*Paid link). On their homepage, click on the ‘Download Open Source’ link.
On the next page, Osano want to encourage you to go with one of their plans. To continue with open source, select the ‘Start coding’ link.
After clicking on this link, this appears under the link.
On the left, there are options to configure your cookie notification popup. On the right, that is the code you need to add to your WordPress website for your notification to appear when you get a visitor to your website.
Don’t worry about adding the code to your website, I show you how to do that later. First, let’s look at how to customize.
Configure your cookie notification
The first box is to set position, you can have a banner or box appear at the top, bottom, right side, or left side of your website.
Position
Here is a banner appearing at the top of the screen.
Click on each option to decide on what is best for your site. As you select different options the code window on the right will update.
Don’t worry about the code yet, we will get to that after configuration is complete. Let’s move on.
Layout
This is to decide on the style of your popup. Here is a box appearing on the bottom right using the ‘Block’ style option.
Click on each option to decide on your favorite.
Palette
This option allows you to choose colors for your notification.
Learn more link
Here is where you put the link to your privacy policy page. If you don’t have one yet, you should get one for your site. There are templates available on the internet, or you can seek legal advice on what is best for your website.
I have a privacy policy on my blog so I will include a link to that in this link. In the cookie notification, the link is added to the ‘Learn more’ text.
Compliance type
Here you can select how users interact with your site. I recommend selecting the first option because options two and three require adding extra code manually.
Custom text
Here you can change the text that appears in the notification.
Now that you have customized your cookie notification, it is time to add it to your WordPress website.
How to add code to WordPress
Now we are interested in the code on the right. There are two bits of code we need, the head tag code, and the body tag code.
The easiest way to add code to your WordPress site is by using the ‘Insert Headers and Footers’ plugin. Therefore, go to the WordPress plugin library and install and activate this plugin for your site.
Once activated, you have this option under ‘Settings’ in your main menu.
There are three boxes to enter code, we need the first and last box.
Next, go back to the code and select ‘Copy HTML’.
Return to your WordPress site and paste this code into the first box.
Go back to get the second box and select ‘Copy code’.
Take this code and paste it into the box at the bottom.
Finally, select ‘Save’. Now you have a cookie notification set for your WordPress website.
Here is a screenshot of my tutorial website.
How to add an open-source cookie notification video tutorial
How to check if your cookie notification is working
After about 10 minutes, go to your website. If you don’t see your notification, you will probably need to clear the cache and cookies first.
This is my website, the cookie consent popup from Osano is at the bottom of the screen.
After the cookie notification disappears from the screen, this is replaced with a ‘Cookie’ icon.
If your visitor clicks on this icon, they can deactivate all scripts and cookies that aren’t categorized as ‘Essential’.
Conclusion
That is how you add a cookie consent notification to your WordPress website. The process feels a little complicated, follow my step by step guide and your site will be compliant in no time.
Even if you are not targeting visitors from the countries on the country list above, it is best practice to have a cookie notification for your site, just in case.
I hope my post helped you, if it did, would you be so kind as to leave me a comment? I love reading feedback.
Another notification service I like to use to promote new posts is www.subscribers.com. Every time I publish a new post, I send a push notification to all my subscribers.
If you would like to learn about this service, check out my ‘How do I add push notifications to my WordPress site?‘ post.
Frequently asked questions
In my post, I show you step by step how to add a cookie consent notification to your WordPress website.
If you have visitors to your site that are in the EU, then yes, you do need a cookie consent notification. If you do not offer this consent, you could be prosecuted.
If you have visitors to your website that come from an EU country, then by law, you must inform your visitors that your site uses cookies. It is a requirement to inform and obtain consent from visitors it aims to give web users more control over their online privacy.
Advertisement
