How To Add An Osano Cookie Consent Notification 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 is a free cookie notification that alerts 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 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 Cookie Consent Notification To WordPress

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. 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 signing in for the first time, you must change your password. Then you can start creating your Osano cookie consent popup.

Osano sign in page

Customize Osano Cookie Consent

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

Dashboard

To start, select Consent Management.

Consent management

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 customize your Osano cookie consent notification popup.

At the bottom of ‘Styling,’ there are color options. Use the menu to select your color scheme or customize 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 HTML Code

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.

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 categorize scripts loaded on your website. To do that, you must add the cookie consent HTML code to your site.

Complete compliance message

Osano Cookie Consent Code

Select the ‘Get Code’ link on the top-right. On the popup, click on Copy Code.

Cookie consent popup HTML code

Add Osano Cookie Consent Code To WordPress

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. The second is for Scripts in Body, and the third box is for Scripts in Footer.

Insert headers and footers settings

Osano’s 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

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, click Clear and Publish.

Select clear and publish

Activate Osano Cookie Consent

To activate the cookie popup, change the mode setting to Permissive or Strict, then Save ChangesPublish your edits., Finally, click 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 categorize.

After about 10 minutes, go to your website. Clear the browser cache if you don’t see your website cookie notification popup.

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 Consent To WordPress Video Tutorial

How to add an Osano cookie consent ...
How to add an Osano cookie consent popup to your WordPress website

Add A Free 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. The HTML code you need to add to your WordPress website is on the right.

Configure Free Cookie Consent

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 your preference for your cookie popup.

Layout

The next option is Layout. What layout type do you want for your popup?

Here is a box using the ‘Block’ layout option.

Select the layout of your cookie notification

Palette

The ‘Palette’ option allows you to choose colors 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 configured, it is time to add the HTML code to your WordPress website.

Add Free Cookie Consent 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 the 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. Click the Insert Headers And Footers link.

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.

Add Free Cookie Consent To WordPress 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 visitors 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.