Table of Contents

Closing Options

Lisa Fockens Updated by Lisa Fockens

A good popup is easy to close. It's an essential component of popup UX design. Visitors struggling to exit a popup will likely get frustrated and even leave your site. Not a great way to start a relationship!

Here are the different closing options available in Wisepops.

1) Close "X" button

  • In the campaign builder, select the Popup option in the left-hand menu
  • Head to the Closing tab in the top menu
  • Switch the first toggle button on to display the closing 'X' button on your popup
  • You can customize the appearance of the closing button of your popup using the options in the top menu. There are options to customize the size, boldness, placement and background, among other features.

2) Close the popup when the user clicks outside it

  • In the campaign builder, select the Popup option in the left-hand menu
  • Head to the Closing tab in the top menu
  • Switch the second toggle button on to "close when the overlay is clicked".
  • In the campaign builder, select Blocks from the left-hand menu
  • Click on the Dismiss block to add a close link to your popup

  • To access the Dismiss settings, click on the close link that has appeared on your popup
  • You can edit the close link and add a "stop showing link" from the left menu. You can change the text, font, size, and more using the top menu.

It is possible to close a popup from your code, without user interaction, through Wisepops' JS Callbacks feature.

Let's say we want our popup to be closed five minutes after being displayed, if not closed before by the visitor.

4) Close a popup automatically with JS Code

It is possible to close a popup from your code, without user interaction, through Wisepops' JS Callbacks feature.

Let's say we want our popup to be closed five minutes after being displayed, if not closed before by the visitor.

Go to the JS section in the left-hand menu of the Campaign Builder, and paste the following callback that is triggered on the Before popup display event:

// Automatically close the popup after a delay
var delay = 5 * 60 * 1000; // 5 mins
setTimeout(function () {
 event.detail.popup.close();
}, delay);

The event.detail.popup object is available only when listening to the Before popup display event. It exposes various methods, including one to close the popup.

Here we used the Wisepops interface to add the JS callbacks. You might want to write this code on your own website instead (to make it work on multiple popups or to inject back-end variables). Please refer to this article to learn how to do so.

If you have any trouble, feel free to reach out to us.

Not seeing your popup on your website? Try these tips.

Use a custom font in your campaign

How To Add a Video to a Popup?

Contact