Showing Popup Only Once (SweetAlert) If Body Has a Specific Class: Save Data to Browser
As a web developer, you may often encounter the need to display a popup message to your users, providing them with important information or instructions. However, displaying the same popup message repeatedly can be frustrating for your users, and it's generally better to show it only once. In this article, we'll explore how to achieve this using the popular SweetAlert library, and we'll also learn how to save the popup view status to the browser's local storage to ensure that the popup is only displayed once.
What is SweetAlert?
SweetAlert is a JavaScript library that provides an easy-to-use and customizable way to display alert, confirmation, and prompt dialogs. It's a great alternative to the standard browser's alert()
, confirm()
, and prompt()
functions, as it offers a more visually appealing and user-friendly experience.
The Problem: Showing Popup Only Once
Imagine you have a WordPress website, and you want to display a popup message to your users on mobile devices (screen width <= 991px) that informs them they can swipe to navigate through posts. You only want to show this popup once, as repeated displays can be annoying for your users.
Here's a basic example of how you could implement this using jQuery and the SweetAlert library:
if (!localStorage.getItem("popup")) {
if ($('body').hasClass('post-template-default')) {
if(screen.width <= 991) {
setTimeout(function(){
swal({
type: 'info',
title: 'You can swipe!',
text: 'Swipe to Right or Left to navigate through posts.',
showConfirmButton: 'false',})
},1000
);
}
localStorage.setItem("popup", 'viewed');
}
In this example, we first check if the popup
key doesn't exist in the browser's local storage. If it doesn't, we check if the body
element has the post-template-default
class, which we can use to target a specific page or post type. Then, we check if the screen width is less than or equal to 991 pixels, which we can use to target mobile devices.
If all these conditions are met, we display the SweetAlert popup after a 1-second delay. Finally, we set the popup
key in the local storage to the value 'viewed'
, so that the popup won't be shown again on subsequent page loads.
The Solution: Saving Data to Browser's Local Storage
The code above works well, but there's one potential issue: if the user clears their browser's local storage, the popup will be displayed again on the next page load. To address this, we can modify the code to use the browser's session storage instead of local storage.
Session storage is a way to store data in the browser that persists only for the current session (until the browser is closed). This means that the popup view status will be reset when the user closes their browser, but it will be preserved across page loads during the current session.
Here's the updated code:
if (!sessionStorage.getItem("popup")) {
if ($('body').hasClass('post-template-default')) {
if(screen.width <= 991) {
setTimeout(function(){
swal({
type: 'info',
title: 'You can swipe!',
text: 'Swipe to Right or Left to navigate through posts.',
showConfirmButton: 'false',})
},1000
);
}
sessionStorage.setItem("popup", 'viewed');
}
The only difference from the previous code is that we're using sessionStorage
instead of localStorage
. This ensures that the popup view status is saved to the browser's session storage, and the popup will only be displayed once during the current session.
Real-World Example and Statistics
Let's consider a real-world example to see the benefits of this approach.
Imagine you're running an e-commerce website, and you want to display a popup message to your mobile users (screen width <= 991px) that encourages them to download your mobile app. The popup could include a call-to-action button that directs them to the app store.
According to a study by Statista, mobile devices account for 54.8% of global website traffic as of 2022. If your website doesn't have a mobile-optimized experience, you could be missing out on a significant portion of potential customers.
By using the SweetAlert popup and saving the view status to the browser's session storage, you can ensure that your users only see the popup message once during their current session. This can lead to a better user experience and potentially higher conversion rates, as your users won't be repeatedly interrupted by the same popup.
In fact, a study by Baymard Institute found that 35% of users reported that "Popups/interstitials that ask me to do something (e.g., sign up, download an app)" were the most annoying mobile UX issue. By implementing the solution we've discussed, you can avoid this pitfall and provide a more seamless experience for your mobile users.
Conclusion
In this article, we've explored how to display a popup message using SweetAlert only once when a specific class is present on the body, and how to save the popup view status to the browser's session storage. This approach ensures that the popup is only displayed once during the current session, providing a better user experience and potentially leading to higher conversion rates.
By leveraging the power of SweetAlert and the browser's session storage, you can create a more polished and user-friendly website or web application. Remember, the key to a successful user experience is to provide relevant and helpful information to your users without overwhelming them with unnecessary interruptions.
If you're interested in further enhancing your website's user experience and conversion rates, be sure to check out Flowpoint.ai, a web analytics platform that uses AI to understand user behavior and generate recommendations to optimize your website.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.