Since Alerts are so much simpler and quicker to implement than Popups, let’s solve this problem.
First, we’ll get the browser to remember that the Alert was closed and not show it again, then we’ll optimize things a little.
Setup
First, let’s add an alert to all pages of the site. This is probably going to be the simplest by adding the alert to the Elementor header. Add the alert, style it to your heart’s content, and let’s move on to dismissing it permanently after the alert is x-ed out.
Step 1: Listen
Alerts already have a close button built in, so let’s listen to the clicks on the close button.
What should we listen to?
For simplicity, I’m going to use jQuery. Let’s test out that our listener is working. You can add the code below to an HTML widget that is right under the Alert. It’s gotta be under the Alert, so that we’re sure the Alert HTML has already been rendered by the time the code is running.
<script>
// Wait for jQuery to be ready
jQuery(($) => {
// Listen to clicks on the Alert dismiss icon
$(‘.elementor-alert-dismiss’).click(() => {
console.log(‘You listened and heard me!’);
});
});
</script>
Step 2: Permanently Hide
Now that we have our listener working, we want to permanently hide the Alert if the listener is clicked. This means we have to store something on the browser to help us remember the Alert was dismissed. There are two options that jump to mind, cookies and local storage. Setting and getting cookies is a pain, as can be seen from Stackoverflow answers. Additionally, there’s no need to add a cookie about Alerts to each request, so let’s just use local storage. Local storage is only for the front end, while cookies can be used both on the back end and front end. In contrast to cookies, nothing can be simpler than getting and setting local storage values, just use localSotrage.getItem and localStorage.setItem. So let’s check for a local storage value, hide the alert if it’s present, and set the value if the dismiss button is clicked.
<script>
// Wait for jQuery to be ready
jQuery(($) => {
// Check if the alert was dismissed
// !! casts to a boolean, since we only care the value was set, not what it is
const dismissed = !! localStorage.getItem(‘alert-dismissed’);
// Store the alert widget element once to refer to thrice
$alertInfo = $(‘.elementor-alert-info’);
if (dismissed) {
$alertInfo.hide();
} else {
// Listen to clicks on the Alert dismiss icon if alert is not hidden
$alertInfo.click(() => {
localStorage.setItem(‘alert-dismissed’, ‘true’);
$alertInfo.hide();
});
}
});
</script>
Step 3: Optimize
We’ve got working code now. Once the Alert is dismissed, it’ll stay dismissed. There are some problems you’ll quickly start to notice. First of all, you’ll see the Alert appear in a flash before it disappears if it was dismissed, so we should change the default state to hidden. Second, the above code hides every single alert on the site if one is dismissed. We should be targeting things better.
Let’s start by targeting the dismissability (is that a word?) to only the Alert we want to target. To do this, let’s put an ID on either the Alert, or, what I prefer, the parent Section. This can be done in the Advanced Tab. If we’re using the parent Section, the click listeners will look something like this:
$(‘#global-alert .elementor-alert-dismiss’).click(() => {
The last optimization is to start with the Alert hidden, and only show it if it hasn’t been dismissed. There are several ways to hide the Alert, but if we’ve added an ID to it, I like to add the following into the “Custom CSS” area on the Advanced tab:
#global-alert {
display: none;
}
Now we only have to see the Alert if it hasn’t been dismissed. So, the end result is:
<script>
// Wait for jQuery to be ready
jQuery(($) => {
// Check if the alert was dismissed
// !! casts to a boolean, since we only care the value was set, not what it is
const dismissed = !! localStorage.getItem(‘alert-dismissed’);
// Store the alert widget element once to refer to twice
$alertInfo = $(‘#global-alert .elementor-alert-info’);
// Since the alert is default hidden, we only have to show it
// if it hasn’t yet been dismissed
if (!dismissed) {
$alertInfo.show();
// Listen to clicks on the Alert dismiss icon if alert is not hidden
$alertInfo.click(() => {
localStorage.setItem(‘alert-dismissed’, ‘true’);
$alertInfo.hide();
});
}
});
</script>
The code above is commented. Without comments, it’s about 10 lines of JavaScript.
Wrapping Up
There are, of course, many ways to add a global banner or alert to a WordPress website with Elementor. The reason I like using an Alert placed in the Elementor nav is because it is so simple and doesn’t require a separate plugin. With just a few lines of JavaScript, you can turn the default Elementor Alert into a dismissible banner that appears on all pages and can be permanently dismissed by a user.
