In some situation, it might be useful to condition the appearance of a popup on the status of another one. Consider the following use case:

  • Display a bottom bar that states that our shop will be closed during holidays. We want the visitor to see the information before anything else is displayed.
  • Afterwards, a popup featuring our new collection is displayed

We will make use of our JS callbacks and custom properties to remember when the closing announcement has been seen.

Step 1:

Create a custom property closedMessageSeen  that stores the current date when our bottom bar is displayed. To do so, you must create a new JS callback that listens for the event Before popup display, with the following script:

event.detail.wisepops('properties', {
  closedMessageSeen: new Date()
});

Step 2:

Ensure that the bottom bar is configured to be displayed only once:

Step 3:

We now want to configure the display of our second popup, about featuring the new collection. We want it to be displayed only when the custom property closedMessageSeen  has been set.

In the editor of this second popup, create a new custom property rule:
closedMessageSeen  exists.

That's it!

Keep displaying the message about holidays until it is acknowledged:

We can also keep displaying the bottom bar until the visitor clicks on a CTA "Ok":

  • Create the CTA, and ensure that it has the "Track clicks" option enabled
  • Listen for the event "After tracked click" to create the custom property
  • Change the bottom bar frequency to stop the display when it is clicked
Did this answer your question?