How to Create a Cookie Notice with Nelio Popups

Published in WordPress.

If you are reading this post, you’ve probably seen the following popup notice on our website at some point in the past, where we ask you to accept our cookie policy to continue reading:

Screenshot of Nelio's cookie dialog
Screenshot of Nelio’s cookie notice.

If I’m honest, we’re not very kind of this UX when you first arrive at our website, but we need it to comply with the Guide on the use of cookies so that we can adapt our web to the new guidelines of the European Committee for Data Protection published by the AEPD in July 2020.

In this post I will first share how we can create a cookie notice like the one above on our website easily with Nelio Popups. Then we will see other examples of cookie notice designs you can also create with it.

Create a Cookie Notice with Nelio Popups

Click on “Add New” in the Nelio Popups menu to create a new popup. Using the well-known block editor, you can add the content you want in your popup:

Creating a cookie notice with the Nelio Popups editor
Viewing the blocks that make up a cookie notice with Nelio Popups.

Specify the Properties of the Popup

From the sidebar of the Nelio Popups editor you can specify additional popup properties such as its size, position, margins, or padding. You can also indicate if you want it to be shown with some kind of animation or, as in this case, to add an overlay behind the popup while it is displayed.

To display the cookie notice to all your visitors on all pages, you must also indicate that it should be “shown everywhere” during the “page view” trigger.

Also, being strict with the RGPD, you should make sure your visitors accept the cookies before browsing your website. To do so, disable the “close on ESC” and “close on outside click” checkboxes, and enable “Lock body scroll:”

Additional cookie notice settings
Additional cookie notice settings.

Add the Cookie Creation Code

Once the content of the popup is created, we must add the functionality to the “Accept and continue” button so that a consent cookie is generated when the user clicks on it. First, in the button’s advanced properties, set a unique HTML anchor to identify it:

HTML anchor of the cookie acceptance button
HTML anchor of the cookie acceptance button.

Then, below the button, create a new HTML block with the following code:

<script>
document.getElementById( 'cookie-consent-button' )?.addEventListener( 'click', () => {
  COOKIE_NAME = 'cookieConsentAccepted';
  date = new Date();
  date.setFullYear( date.getFullYear() + 1 );
  document.cookie = `${ COOKIE_NAME }=true; expires=${ date.toUTCString() }; path=/`;
  window.parent.location.reload();
} );
</script>

The previous snippet adds a click listener to our cookie-consent-button button. When the button is clicked, it creates a cookie names “cookieConsentAccepted” that expires in one year and then reloads the current page.

Here’s how it should look like:

Edition of the cookie popup with the HTML code included
Edition of the cookie popup with the HTML code included.

Display the Cookie Notice Only When Consent Has Not Been Accepted

Finally, all we have to do is prevent the popup from showing up when the cookie we just created exists. We can achieve this by adding a new condition in our popup: “show the popup if if said cookie does not exists.”

Shows the cookie notice only if the cookie acceptance cookie does not exist
Shows the cookie notice only if the cookie acceptance cookie does not exist.

And that’s it! We have already created the cookie notice with Nelio Popups. You can try this out by looking at the cookies in your browser. Just inspect the current page, click on the button, and then look for the cookie named “cookieConsentAccepted.” Its value should be true:

Screenshot of page cookie inspection
Screenshot of the cookie inspection of the page.

Examples of Cookie Notices

Nelio Popups makes it super easy to create alternative popup notices, with custom layouts and display options. We have already seen that the notice on our website is a well visible popup in the center of the page and does not allow the user to continue browsing the web until the visitor gives us their consent.

Box with two buttons

If you have a page where the user can select the various cookie administration options, you can add to your cookie notice an additional button that links to that page:

As you can see on the image above, the notice is made up of the following blocks: a header, a paragraph, a separator line and the two buttons.

If you’re not subject to the GDPR and you want to give the option to close the cookie notice and let the user to continue browsing, you can add the option to close the cookie notice with an additional button or a cross. In such a case, you probably prefer to display the notice in a corner of the page so that it is not so invasive.

Banners at the Top of the Page

You will find more than one website that prefers to display the cookie notice as a banner at the top of the page. The advantage of this option is that, although the user cannot continue browsing the site unless they give their consent, you allow them to see more page’s content and it’s less intrusive.

The banner can be the full width of the page and include more buttons or a link to additional information.

To make the banner stand out more, you can add a border in a more prominent color.

Footer at the Bottom of the Page

Alternatively, the least intrusive cookie notices are those displayed at the bottom of the page. In this way, the first thing the user sees is the content and then the notice. Below you can see three different examples of cookie notices displayed at the bottom of the page with a background color to make them stand out.

Conclusion

If your website has visitors from a European country, make sure that they accept your use of cookies. With Nelio Popups you can create cookie notices easily that are perfectly integrated with your website and with the flexibility to display them wherever you want.

Featured image of Kai Pilger on Unsplash.

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.