Creating a Cookie Consent Alert

You can easily add a “We use cookies” notification to your website using the Cookie Manager and Alerts Component in Wappler. We will create a basic informational notification which tells your users that you use cookies, and that by continuing to use your website they accept them.

In the App Connect panel, select App and click the add new component button:

Open State Management and select Cookie Manager:

Then click define cookies:

Click the add new button and select variable:

We call this cookie - notification:

Then, in App Connect panel select App and add new component:

Open Components and select Alert:

In order to be able to see the alert in design view and edit it, we enable the auto-show option:

Change the alert style, to what you need. We select the Info style:

Then we select to center its content:

You can double click and edit the default text:

You can also add a Lern More link, which points to your cookie policy:

So just link to it. In our example we use: which explains what the cookies are and how to control them in your browser:

Now let’s add a button in the alert. Right click the link, select after, and add a button:

Customize the button as you need. We set its style to Info and the size to Small. Then change the default text of the button, as per your needs:

When you are done customizing the button, add a new dynamic event for it:

Select Mouse > Click:

Then click the dynamic action picker, to select what needs to happen on click:

Select Set, under the Cookie Manager component:

Then select the notification cookie, which we created and set its value to 1:

We set the cookie expiration to 90 days:

Now, when we click the button, the notification cookie value will be set to 1.

Then select the alert and turn off the auto-show option, as we won’t need it any longer:

With the alert still selected, add a new dynamic attribute:

Select Alert > Alert Show:

Click the dynamic data picker, to select when to show the alert:

Under the Cookies Manager, select the notification cookie. Then add != 1 after it, in the expression field:

This way, the alert will be displayed only when the cookie value is different than 1 - i.e. when the button has not been clicked. When the users click the button, the alert will be hidden and it won’t show until the notification cookie expires.


8 posts were split to a new topic: How to use cookie manager in PHP includes?

Well you are using a wrong dynamic attribute. It must be the alert show, not just show:

Please make sure to follow the tutorial.

Thank you Teodor and excuse me for the other post.
I couldn’t find your answer. That’s why I’ve deleted the original post and make another one.
Just a missunderstanding.

Just noticed a slightly misleading tooltip for the cookie expires field:

Screenshot 2021-10-22 at 16.42.56

I was just about to go down a rabbit hole and add code to calculate today plus 30 days when I thought I’d check how it works and found this thread.

Could the tooltip say ‘Enter the number of days the cookie should expire after’ instead?

Tip: In Wappler 4+, when following this guide, you should switch to “code” when setting the ‘!=1’ condition.
If you don’t and type '!=1" directly after the cookie-variable the resulting code will not work and the alert will always be displayed.
The image shows the working version.

Hey everyone…

I’ve been working on a system that will actually enable and disable cookies for services such as Google analytics…

The details are on this post!

Best wishes,

1 Like