Display a Popup Only After Another One Has Been Seen (or Clicked)

Lisa Fockens Updated by Lisa Fockens

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

  • Display a bottom bar that states that our shop will be closed during the 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 recall 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

If you need any further help, get in touch with our Customer Support team.

Forbid Disposable or Free Emails in Your Signup Form

Personalize the Content of Your Popup or Notification on the Fly

Contact