Stop showing a notification after clicking on a popup

Dev Updated by Dev

If you use both popups and notifications on your websites, there might be cases when you want to stop showing a notification after the visitor has interacted with a popup.


One common example: if you have both (1) a signup popup display on the welcome screen and (2) a signup notification in the feed. This is a great strategy we recommend to increase your signup conversions: even if the visitor first discards the signup popup, she will still get a chance to signup with the notification later on after learning more about your business. But if she signed up with the popup in the first place, then you should stop showing her the signup notification otherwise it might confuse her.

You can achieve that in two steps: first, you create a JS callback in the popup that creates a variable when the visitors interacts with the popup - secondly, you exclude that variable from the targeting of your notification. Sounds tricky? You don't need developer skills by following this tutorial step by step.

Step #1: Creating a new variable when the visitor interacts with the popup

Inside the popup editor, after you built your popup, click on the "JS callback" tab

Click on "+ Add a new script", then select the Event "After form submit" in the dropdown. That will allow to trigger the callback when the visitor submits his information in the signup form.

Note: if the popup contains a CTA button rather than a form, you can use "After tracked click" instead. You can also try the other events depending on your specific purpose.

Now, you can copy paste the following script into the Script field:

window.wisp.updateContext({ custom: { notificationStopShowing: 1 } });

That's it for the popup! Now let us create the notification.

Step #2: Create a notification that only displays if the visitor did not fill the popup signup

Click on the "Notifications" tab of the app and create the notification - in our example we will use the Signup template; but this tutorial applies to other templates too.

Fill up the teaser and message (and optionally the sync section if you chose the Signup template). Then the real magic happens in the "Targeting" section. Choose "Custom property" in the dropdown.

Then, fill up the name of the Custom property that is created in the popup callback: "notificationStopShowing" (without the quotes, and keeping in mind that custom properties are case sensitive). Then choose the matching rule "Does not exist". That way, the notification will only display if the popup callback was not called, i.e. if the visitor has not submitted his information in the signup form.

Close a Popup With JS Code