Website Notification Bar

Ask the community
1

Is there a way to adjust the code on the Website Notification Bar so that it only shows up until the user clicks it for the first time?

2

Yes possible one could do this with a bit of extra custom code. e.g. add onclick listener. Once click is done register a cookie/localstorage, close the bar and then read next time to decide on showing.

If you share your page I can make an example

1 Like
3

image

4

Url share :wink:. fifthdownportal.com if I’m correct?
By the way: be careful, your header has a user profile option opened to the whole internet (It should be visible only for loggedin users)

1 Like
5

@epm99 wasn’t able to see the notification bar did you remove it?

6

No, I didn’t remove it. The notification bar only pops up when a user logs in and it looks to see if that user should see the notification. (The user profile in the screenshot is not open to all, I had logged in.) You don’t see it on the header when not logged in because the header for that page is different. What I want to do now is to adjust the code so that once the user clicks on the banner to see the new documents, the banner disappears.

7

Would you still be able to provide adjusted coding so that the notification banner will disappear once clicked? The code on it right now is just the code copied straight from your Website Notification Bar Generator.

8

@epm99 here is the code, pls put into app settings custom code header area:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const notificationBanner = document.querySelector('.sw-banner');
        if(notificationBanner) {

            const notificationBannerClicked = localStorage.getItem('notificationBannerClicked');
            if(notificationBannerClicked) {
                notificationBanner.style.display = "none";
            } else {
                notificationBanner.addEventListener("click", function(){
                    localStorage.setItem('notificationBannerClicked', 'true');
                    notificationBanner.style.display = "none";
                });
            }
        }
    });
</script>