How to add cookie notifications to WordPress

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?

If you get visitors to your website from any of the following countries, you need a cookie consent notice on your site.

AustriaItaly
BelgiumLatvia
BulgariaLithuania
CroatiaLuxembourg
CyprusMalta
CzechiaNetherlands
DenmarkPoland
EstoniaPortugal
FinlandRomania
FranceSlovakia
GermanySlovenia
GreeceSpain
HungarySweden
IrelandUnited Kingdom

Osano free plan option

To get started, go to https://www.osano.com/cookieconsent, (*Paid link).

Osano homepage
Osano.com homepage

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.

sign up free

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.

Choose a plan

To get started, click on the ‘Get Basic’ link. After that, complete the form with your details and select ‘Next.’

Add account details form

On the next page, complete your address details.

Address details

Finally, to activate your account, accept the terms of service.

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.

Account activated message

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.

Osano sign in page

Advertisement


Customize a cookie consent popup

When you sign in, you come to your dashboard.

Dashboard

To start, select ‘Consent Management.’

Consent management

First, you need to configure your website. To add your site, select the ‘Plus’ icon on the right.

Add a website

There are two sections to complete ‘Settings’ and ‘Styling.’

In the settings section, enter a name 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 templates on the internet you can edit and use.

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.

Complete your website details

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.

Customize the colors of your cookie consent popup

Preview your cookie consent popup

To see a preview of your cookie popup, click on ‘Show Preview’ on the top-right.

Cookie consent popup preview

Get the HTML code for your cookie

Once you have finished customizing your cookie, select ‘Create Configuration.’

Create configuration

Then ‘Publish.’

Select publish

And ‘Clear and Publish.’

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.

Complete compliance message

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.’

Cookie consent popup HTML code

Advertisement


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.’

Add new plugin
Headers and footers

Install and activate this plugin. Once activated, you have an extra option in your ‘Settings.’ Click on ‘Insert Headers and Footers.’

Select headers and footers

Then you come to this.

Headers and footers plugin

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.

Cookie consent 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.

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.’

Save your changes

Then ‘Publish.’

Select publish

Finally, select ‘Clear and Publish.’

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.’

Change the mode setting

There is a short wait while your changes are updated. Once updated, you get a ‘Live’ message.

Cookie consent popup is live

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.

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.

Cookie consent popup

After the cookie notification disappears from the screen, a cookie icon appears.

Cookie icon

If your visitor clicks on this icon, they can deactivate all scripts and cookies that are not ‘Essential.’

Options to deactivate cookies and scripts

How to add an Osano cookie notification to WordPress video tutorial

Watch this video on YouTube.

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.

Open source download 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.

Select start coding

After clicking on this link, the following appears.

Open source code generator

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.

Position

Here is a banner appearing at the top of the screen.

Select position

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.

Layout

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.

Select the layout of your cookie notification

Click on each option to decide on your favorite.

Palette

This option allows you to choose colors for your notification.

Chose your preferred color combination

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.

Compliance type

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 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.

Add new plugin
Insert headers and footers plugin

Once activated, you have this option under ‘Settings’ in your main menu.

Select headers and footers from the menu

There are three boxes to enter code.

Insert headers and footers settings

Next, go back to the code and select ‘Copy HTML.’

Copy HTML code

Return to your WordPress site and paste this code into the first box.

Paste the HTML code into the top box

Go back to get the second box and select ‘Copy code.’

Copy the code

Take this code and paste it into the box at the bottom.

Paste your code into the third box

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.

Cookie notification

How to add an open-source cookie notification video tutorial

Watch this video on YouTube.

Conclusion

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.


Advertisement


Sharing is caring!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.