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):
Then, select the cookie manager in app structure and click the define cookies button:
Click the add new button, and select add variable:
That’s the cookie which will control the modal. We call it ‘notice’. Click the select button to create the cookie:
Then add the modal - in app structure add new component, open the Component category and select Modal:
Make sure to leave the Auto Show option for modal turned off.
Then add new dynamic attribute:
Open the Modals category and select Modal Show:
Click the dynamic data picker icon, to select when to show the Modal:
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:
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:
Open the Mouse category and select on Click:
Click the dynamic data picker to set the action on click:
Under cookie manager, select set and then click the add action button:
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’:
Set how long (in days) should the cookie (and its value) be kept in the users browsers. We set this to 60 days:
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:
Click the select button, and you are done:
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.
