Sliding popup with memory

How to import code

Wait two seconds…

Popup Sliding with Memory
This popup will use Interaction layers and cookies. A popup will check if the user has the specific cookie. If not, then it’s sliding Up after a specific period. Users can click on the button that will set cookie and hide banner. All parameters are configurable

Simple effect which shows you how flexible the Interaction panel features. So, this popup has the next logic. It opened automatically after 2 seconds, if the user clicks on the button, a popup will not show up again but after some period of time, a cookie will be cleaned and he will see the popup again

To do this popup, I added a Container with text. You can add the design of the container inside panels, but it’s important to add Position Fixed inside Class. This is because we want to edit popup inside the admin area and the class system has the option to enable styles only for the frontend side (click on the filter icon for this)

So, I created class cookbanner and added it as local class to container. Then added fixed position, size and 100% shifting to hide it

Find more about classes in the Learning Center

Now. on button, I need to add interaction layer with On Click trigger and two actions

  1. Save cookie
  2. Remove active class
Find more about Interactions in the Learning Center

Here is important to add proper storage time. Because by default it’s in seconds, so you need to have big value if you want to save as 30 days. (86400*30)

And last thing – I add interaction layer with On load for container and Action “add class”. But i need also to choose Condition where i check first if user has cookie (which is added by button click)