Discuss

Using Cookie to Show Modal Once

On this page

If you want to show modal only on first load, or only once then cookies are the way to go.

We added App Connect and Bootstrap 4 frameworks on our page. First let's setup the cookies. Right click App(1) then open State Management(2) and select Cookie Manager(3):

Screenshot_8|690x389

Then, select the cookie manager in app structure and click the define cookies button:

Screenshot_9|690x389

Click the add new button, and select add variable:

Screenshot_11|690x389

That's the cookie which will control the modal. We call it 'notice'. Click the select button to create the cookie:

Screenshot_12|690x389

Then add the modal - in app structure add new component, open the Component category and select Modal:

Screenshot_13|690x389

Make sure to leave the Auto Show option for modal turned off.

Screenshot_14|690x389

Then add new dynamic attribute:

Screenshot_15|690x389

Open the Modals category and select Modal Show:

Screenshot_16|690x389

Click the dynamic data picker icon, to select when to show the Modal:

Screenshot_17|690x389

Select your cookie, under Cookie Manager. Then, we need to setup the condition when to show the modal. We manually add != 1 after the cookie in the expression field. That means - show the modal only when the cookie value is not equal to 1:

Screenshot_18|690x389

Now, select the button which will be used to control the cookie value. For example a button that users click to agree to your site terms and conditions, or to accept cookies policy etc., then add new dynamic event:

Screenshot_20|690x389

Open the Mouse category and select on Click:

Screenshot_21|690x389

Click the dynamic data picker to set the action on click:

Screenshot_22|690x389

Under cookie manager, select set and then click the add action button:

Screenshot_23|690x389

Select your cookie from the Name dropdown and add a value 1. That means on click the cookie with the name 'notice' will receive a value of '1':

Screenshot_24|690x389

Set how long (in days) should the cookie (and its value) be kept in the users browsers. We set this to 60 days:

Screenshot_25|690x389

Then select Hide under modal and click the add action button. This will close the modal, after the button is clicked and the cookie value is set:

Screenshot_26|690x389

Click the select button, and you are done:

Screenshot_27|690x389

The modal will be displayed only the first time your users visit the site. Once they click the button, it will be hidden and won't display on page reload.


WapplerPrevious|101x31   WapplerNext|77x31