How to add cookie notifications to WordPress

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.

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

How To Add An Osano Free Plan Cookie Notification Popup To Your WordPress Website

First, go to Osano.com (*Paid link).

Osano homepage
Osano.com homepage

Next, select the ‘Sign Up Free’ link.

sign up free

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.

Free plan

To get started, click on the ‘Get Started’ 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

After you sign in for the first time, you must change your password. Then you can start creating your Osano cookie consent popup.

Osano sign in page

Advertisement


Customise Your Cookie Consent Popup

When you sign in, you come to your Osano account dashboard.

Dashboard

To start, select ‘Consent Management’.

Consent management

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

Complete your website details

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.

Customize the colors of your cookie consent popup

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

Cookie consent popup preview

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.

Create configuration

Then ‘Publish’.

Select publish

Finally, select ‘Clear and Publish’.

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.

Complete compliance message

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

Cookie consent popup HTML 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’.

Add new plugin

Search for ‘Headers and Footers’.

Headers and footers

Install and activate this plugin. Once activated, go to ‘Settings.’ and click on ‘Insert Headers and Footers’.

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

Insert headers and footers settings

Osano instructions direct you to place the cookie consent notification code in the ‘header’ section.

Cookie consent HTML code

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

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.

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.

Classification

Once completed, select ‘Save Changes’.

Save your changes

Then ‘Publish’.

Select publish

Finally, select ‘Clear and Publish’.

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

Change the mode setting

Once updated, the warning disappears, and you get a ‘Live’ message.

Cookie consent popup is live

Review Scripts And Cookies

Additional items appear in your ‘Scripts’ and ‘Cookies’ list. Go back to these tabs to categorise.

After about 10 minutes, go to your website. Should you not see your website cookie notification popup, clear your browser cache.

Cookie consent popup

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

Cookie icon

Should your visitor clicks on this icon, they can turn off scripts and cookies that are not ‘Essential.’

Options to deactivate cookies and scripts

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.

Open source download link

On the next page, select the ‘Start coding’ link.

Select start coding

After clicking on this link, the following options appear.

Open source code generator

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 position

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.

Select the layout of your cookie notification

Palette

The ‘Palette’ option allows you to choose colours for your notification.

Chose your preferred color combination

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.

Compliance type

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

Add new plugin

Search for ‘Headers and Footers’. Install and activate the ‘Insert Headers and Footers’ plugin.

Insert headers and footers plugin

Once activated, under ‘Settings’ in your main menu, select ‘Insert Headers and Footers’.

Select headers and footers from the menu

There are three boxes to enter the code.

Insert headers and footers settings

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

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 the HTML code and select ‘Copy code’ from the bottom.

Copy the code

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.

Paste your code into the third box

Here is a screenshot of my tutorial website with my new cookie popup.

Cookie notification

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.


Advertisement


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.