In my post, I show you step by step how to add an Osano cookie notification to your WordPress website. There are two ways to add a cookie consent notification to your site. The first method is to add a cookie hosted by Osano using their free plan. The second method is to add code to generate a popup.
The free plan on Osano is limited to 7,500 impressions per month, ideal for small or new websites. To find out how to add this cookie to your website, click on this link ‘Osano free plan option.’
The code option is free and has no limits. To follow my guide on how to add this code to your WordPress blog, 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
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.
Osano free plan option
To get started, go to https://www.osano.com/cookieconsent, (*Paid link).
Then, sign up for free.
Sign up for a free account
To start creating your Osano cookie consent notification, click on the ‘Sign up free’ link.
The free plan is limited to 7500 views per month. If you have a new site, this is ideal. Once you grow your blog to more than 7500 views per month, you can upgrade to a business plan.
To get started, click on the ‘Get Basic’ link. After that, complete the form with your details and select ‘Next.’
On the next page, complete your address details.
Finally, to activate your account, accept the terms of service.
Once you activate your account, you get a 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, after that you can start creating your Osano cookie consent popup.
Customize a cookie consent popup
When you sign in, you come to your dashboard.
To start, select ‘Consent Management.’
First, you need to configure your website. To add your site, select the ‘Plus’ icon on the right.
There are two sections to complete ‘Settings’ and ‘Styling.’
The sliding scale under ‘Name’ is to set how long your visitor has to be on your site before they see the cookie notification. The default is 10 seconds.
In the styling section, you have the option of a box or banner style notification, and where it will appear on your site.
Use the drop-down menus to customize your Osano cookie consent notification popup.
At the bottom of ‘Styling,’ there are 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 cookie 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.’
And ‘Clear and Publish.’
There is a short wait while your cookie is published.
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.’
How to put the HTML code onto your WordPress site
The best way to put this code onto your website is to use the ‘Insert 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 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 HTML code that needs to be in the ‘head’ section the second box is for HTML 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.’ If you already have HTML 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.’
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’ 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 updated. Once updated, you get a ‘Live’ message.
Review scripts and cookies
Over the first couple of days, additional items appear in your ‘Scripts’ and ‘Cookies’ list. Go back to these tabs to categorize new items.
How to check your cookie notification
After about 10 minutes, go to your website. If you don’t see your notification, you probably need to clear the cache and cookies in your browser.
Here is my website the cookie consent popup from Osano is at the bottom of the screen.
After the cookie notification disappears from the screen, a cookie icon appears.
If your visitor clicks on this icon, they can deactivate all scripts and cookies that are not ‘Essential.’
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 wants 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, the following appears.
On the left, there are options to configure your cookie notification popup. On the right is the code you need to add to your WordPress website for your cookie notification to appear when you get a visitor to your site.
Configure your cookie notification
The first box is to set a position you can select to have a banner or box appear at the top, bottom, right side, or left side of your website.
Here is a banner appearing at the top of the screen.
Click on each option to decide on what is best for your site. With each selection, the code window on the right updates.
Don’t worry about the code yet, we will get to that after configuration is complete. Let’s move on.
The layout option is for you 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.
This option allows you to choose colors for your notification.
Learn more link
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.
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 the cookie notification popup code to WordPress
Now we need 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 to use the ‘Insert Headers and Footers’ plugin. Therefore, go to the WordPress plugin library and install and activate this plugin for your blog.
Once activated, you have this option under ‘Settings’ in your main menu.
There are three boxes to enter code.
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 popup set for your WordPress website.
Here is a screenshot of my tutorial website with my new cookie popup.
How to add an open-source cookie notification video tutorial
I have shown you step by step how to create and add an Osano cookie consent notification popup to your WordPress website. The free option is limited to 7500 views per month, as you grow your audience to more than that, you can upgrade to a business plan.
I also guided you step by step on how to add code to your website to display a cookie consent popup on your site. This option is also free and has no limits.
If you have visitors from Europe to your site, you must have a cookie consent popup to be compliant. Set up takes a few minutes, follow my beginner’s guide to get a cookie consent popup for your WordPress blog.
I have many more WordPress tutorials to help you build your site. Don’t forget to leave me a comment.
I hope my post helped you if it did, would you be so kind as to leave me a comment? I love reading feedback.