In my post, I show you how to add an Osano cookie consent notification to a WordPress website, step by step.
Osano offers two types of cookie notifications for your website.
The first cookie notification allows your visitors to turn off data gathering. The Osano free plan cookie notification is limited to 5,000 views per month. Osano offers paid plans if you need more than 5,000 impressions.
The second cookie is an open-source cookie notification that alerts your visitors you use cookies on your website. This cookie notification has no limits, but your visitor doesn’t have the option to turn off data gathering.
Let’s get started.
Do you need a cookie consent notification popup for your WordPress website?
You must have a cookie consent notification popup if you receive visitors to your website from any of the following countries.
| 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 |
How To Add An Osano Free Plan Cookie Notification Popup To Your WordPress Website
First, go to Osano.com (*Paid link).
Next, select the ‘Sign Up Free’ link.
The free plan is limited to 5000 views per month, one user, and one account. If you have a new site, this is ideal. Once you grow your blog to more than 5000 views per month, you can upgrade to a paid plan.
To get started, click on the ‘Get Started’ 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.
After you sign in for the first time, you must change your password. Then you can start creating your Osano cookie consent popup.
Advertisement
Customise Your Cookie Consent Popup
When you sign in, you come to your Osano account dashboard.
To start, select ‘Consent Management’.
To add your site, select the ‘Plus’ icon on the right.
There are two sections to complete ‘Settings’ and ‘Styling.’
In the settings section, enter the name of your website, the URL, and the URL of your privacy policy.
If you don’t have a privacy policy page for your website yet, get that first. There are free templates on the internet you can edit and use.
The sliding scale under the ‘Name’ section 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, select a box or banner style notification. Also, choose where it appears on your site.
Use the drop-down menus to customise your Osano cookie consent notification popup.
At the bottom of ‘Styling,’ there are colour options. Use the menu to select your colour scheme or customise using the box options.
To see a preview of your cookie notification, click on ‘Show Preview’ on the top-right.
Generate The HTML Code For Your Cookie
Once you have completed your consent cookie, it is time to add it to your website. To do that, you need HTML code. Select ‘Create Configuration’ to start the process to generate code.
Then ‘Publish’.
Finally, select ‘Clear and Publish’.
There is a short wait for your cookie consent notification code.
Once you get your code, you receive a warning.
To continue, you must categorise scripts loaded on your website. To do that, you must add the cookie consent HTML code to your site.
How To Get The Cookie Consent Notification Code
To get your code, select the ‘Get Code’ link on the top-right. On the popup, click on ‘Copy Code’.
Advertisement
How To Put The HTML Code On Your WordPress Website
The simplest way to add HTML code to your website is to use the ‘Insert Headers and Footers’ plugin.
Go to ‘Plugins’ and select ‘Add New’.
Search for ‘Headers and Footers’.
Install and activate this plugin. Once activated, go to ‘Settings.’ and click on ‘Insert Headers and Footers’.
There are three boxes available to enter HTML code. The top box is for ‘Scripts in Header’, and the second box is for ‘Scripts in Body’, and the third box is for ‘Scripts in Footer’.
Osano instructions direct you to place the cookie consent notification code in the ‘header’ section.
Therefore, paste the code into the top ‘Scripts in Header’ box.
Should you already have HTML code in this box, ensure the cookie code is at the top. It must be first.
Once you have pasted your code, select ‘Save.’
Classify Scripts Loaded On Your Website
Once you have saved the code to your website, return to your Osano dashboard. Select your website, and open the ‘Scripts’ tab.
Osano lists scripts loaded on your website. To make your blog compliant, you must classify these scripts.
To start, open the menu for each script and select the classification.
Once completed, select ‘Save Changes’.
Then ‘Publish’.
Finally, select ‘Clear and Publish’.
How To Activate Your Cookie Consent Notification Popup
To activate the cookie popup, change the mode setting to ‘Permissive’ or ‘Strict’, then ‘Save Changes’, ‘Publish’, Finally, click on ‘Clear and Publish’.
Once updated, the warning disappears, and you get a ‘Live’ message.
Review Scripts And Cookies
Additional items appear in your ‘Scripts’ and ‘Cookies’ list. Go back to these tabs to categorise.
How To Check Your Cookie Notification
After about 10 minutes, go to your website. Should you not see your website cookie notification popup, clear your browser cache.
After the cookie notification disappears from the screen, a cookie icon appears.
Should your visitor clicks on this icon, they can turn off scripts and cookies that are not ‘Essential.’
How To Add An Osano Cookie Notification To WordPress Video Tutorial
How To Add An Open-Source Cookie Consent Notification To WordPress
To get started, go to Osano.com/cookieconsent, and click on the ‘Download Open Source’ link.
On the next page, select the ‘Start coding’ link.
After clicking on this link, the following options appear.
On the left, there are options to configure your cookie notification popup. On the right is the HTML code you need to add to your WordPress website.
Configure Your Cookie Notification
Position
The first option is ‘Position’. You can 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.
Select the position for your cookie popup.
Layout
The next option is ‘layout’. What layout type do you want for your popup?
Here is a box appearing on the bottom right using the ‘Block’ layout option.
Palette
The ‘Palette’ option allows you to choose colours for your notification.
Learn more link
The ‘learn more link’ is for you to link to your privacy policy page. If you don’t have one yet, you should get one for your website. There are templates available on the internet, or you can seek legal advice on what is best for your website.
The ‘Learn more’ text on the cookie popup is a link to your policy.
Compliance type
Here you can select how users interact with your site. I recommend choosing the first option because options two and three require adding extra code manually.
Alternatively, you can opt for one of Osano’s hosted plans.
Custom text
The ‘Custom Text’ option allows you to alter the default text on the cookie notification.
Once you have completed configuring your cookie, it is time to add the HTML code to your WordPress website.
How To Add The Open-Source Cookie Notification Popup Code To WordPress
There are two sections of code to add, 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. Go to the WordPress plugin library and install and activate this plugin for your blog.
Go to ‘Plugins’ in WordPress admin and select ‘Add New’.
Search for ‘Headers and Footers’. Install and activate the ‘Insert Headers and Footers’ plugin.
Once activated, under ‘Settings’ in your main menu, select ‘Insert Headers and Footers’.
There are three boxes to enter the code.
Next, go back to the cookie HTML code and select ‘Copy HTML’ from the top.
Return to your WordPress site and paste this code into the first box.
Go back to the HTML code and select ‘Copy code’ from the bottom.
Copy this code and paste it into the bottom box on your website.
Finally, select ‘Save.’ Now, you have a cookie notification popup for your WordPress website.
Here is a screenshot of my tutorial website with my new cookie popup.
Should your cookie popup not appear, clear your browser cache.
How to add an open-source cookie notification video tutorial
Conclusion
Cookie notification popups are necessary for your WordPress blog if you have visitors from the European Union.
Osano offers two excellent options to add a cookie consent notification to WordPress. The first option is a hosted cookie notification that allows your visitors to turn off data gathering. The second option is a simple cookie popup that alerts your visitors that you use cookies on your website.
Both cookie options are easy to add to WordPress websites. I recommend installing the ‘Insert Headers and Footers’ plugin to add the HTML code necessary for your cookie.
Should you have any questions about my blog post, please leave them in the comments section below. I love trying to help fellow bloggers.
