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
Select the "Design" option from the left-hand menu.
Navigate to the "Closing" tab in the top menu.
Enable the first toggle button to display the closing 'X' button on your popup.
To further personalize the appearance of the closing button, utilize the options available in the top menu. These options allow you to customize the size, boldness, placement, and background, among other features.
2) Close the popup when the user clicks outside it
Go to the campaign builder and select the Design option from the left-hand menu.
Navigate to the Closing tab in the top menu.
Activate the second toggle button to enable the "close when the overlay is clicked" feature.
3) Close link
From the campaign builder, navigate to the left-hand menu and select Blocks.
Locate the Dismiss block and click on it.
Now, access the Dismiss settings by clicking on the close link that appears on your popup.
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.