Cookie notifications are required by law in some parts of the world. In this guide, we’re going to show you how you can create a sleek and beautiful Cookie Notification Popup quickly and easily using Popup Maker.
Check Out the Live Demo
See our Cookie Notification Popup in live action.
Before We Get Started
You can create this popup using the free version of Popup Maker, but we thought it would make the most sense to disable and remove the close button so as to force the user to acknowledge that Cookies are being used on the site – this prevents the user from simply closing the popup without that acknowledgement.
Using the Forced Interaction Extension in this case is completely optional, but we thought going this direction made the most sense.
Creating the Cookie Notification Popup
As always, create your new popups by navigating to Popup Maker Add Popup. If you haven’t been here before, welcome to the Popup Editor!
Content
For our content, all we need is a brief statement about our use of Cookies and a button that will close the popup and serve as acknowledgement from the user that they agree to our Cookie uses. We also want to display the statement and button inline, as one row, to keep it nice and clean.
To do this, simply copy/paste the HTML below into the Text Tab of the Popup Content Editor:
Here’s what it looks like in the Text Tab of the Popup Editor:
Triggers and Cookies
For this use case, we’re going to make use of the Auto Open Trigger with a half-second delay. To make sure the popup continues to Trigger until the user clicks the confirmation button, we also use a Cookie that’s created only when the popup is closed (which can only be done using the button because of Forced Interaction).
Here’s what our setup looks like in the Popup Editor:
Once the popup is closed via the confirmation button, the popup won’t be shown again for one month, or until the Cookie is removed or the Cookie Key changed.
Forced Interaction
Using the Forced Interaction Extension allows us to disable and remove the Close Button so that the only way for the user to close the popup is via the Confirmation Button. Ultimately, this is an optional feature, but we thought it made the most sense for this use case.
Display Settings
To achieve that banner style look that slides in from the bottom, we’ve setup our Display Settings as follows:
The first key feature we used here to achieve our look is the Custom Size Feature – setting the Width to 100% and checking the Auto Adjusted Height feature will give us a banner style popup.
Next, we don’t want to hide our website even though the popup will be shown. As a result, we used the Disable Overlay Feature.
To make sure the the user can still scroll and read our site while keeping the popup in place, we can use the Fixed Positioning Feature. This will keep the popup “stickied”.
Last, we setup the Animation Origin and Positioning settings to Bottom to keep the popup on the bottom of the screen after sliding in from the bottom.
