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:
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:
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:”
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:
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:
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.”
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:
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.
Nelio Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
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