Discuss

Creating a Cookie Consent Alert

On this page

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:

Screenshot_1|690x414

Open State Management and select Cookie Manager:

Screenshot_2|690x414

Then click define cookies:

Screenshot_3|690x414

Click the add new button and select variable:

Screenshot_5|690x414

We call this cookie - notification:

Screenshot_6|690x414

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

Screenshot_7|690x414

Open Components and select Alert:

Screenshot_8|690x414

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

Screenshot_9|690x414

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

Screenshot_10|690x414

Then we select to center its content:

Screenshot_11|690x414

You can double click and edit the default text:

Screenshot_12|690x414

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

Screenshot_13|690x414

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

Screenshot_14|690x414

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

Screenshot_15|690x414

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:

Screenshot_17|690x414

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

Screenshot_19|690x414

Select Mouse > Click:

Screenshot_20|690x414

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

Screenshot_21|690x414

Select Set, under the Cookie Manager component:

Screenshot_22|690x414

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

Screenshot_23|690x414

We set the cookie expiration to 90 days:

Screenshot_24|690x414

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:

Screenshot_25|690x414

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

Screenshot_26|690x414

Select Alert > Alert Show:

Screenshot_27|690x414

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

Screenshot_28|690x414

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

Screenshot_29|690x414

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.

cookie-message|690x454