Notification Bar At Top Of Page

There's times that you might want to add notifications to the top of your Membership sites, or if you whitelabel our platform, you may want to add notifications to your users.

The code below and video allow you to do exactly that.

"const showNotificationBar" is a true/false master on/off switch.

"const notificationMessage" allows you to change the message that appears. Must be inside quotation marks 'like this'.

"const notificationVersion" is designed to allow you to push new messages/notifications to all users even if they've hit "hide permanently".

"const showButton" is a true/false switch if you want or need to show a button to your users.

"const buttonText" controls what the button says. Must be inside quotation marks 'like this'.

"const buttonLink" controls where the button takes people when they click it. Must be inside quotation marks 'like this'.

<script>
function addNotificationBar() {
    // --- Master Switch ---
    const showNotificationBar = false; // Set to false to completely disable the notification bar. Change to true to turn on.
    // --- Configuration (Easy to Edit) ---
    const notificationMessage = 'This is a NEW notification message!';
    const notificationVersion = 1; // Increment this when you change the message
    const showButton = true; // Set to false to hide the button
    const buttonText = 'Learn More'; // Text for the button
    const buttonLink = 'https://www.example.com'; // URL for the button
    // --- Early Exit if Disabled ---
    if (!showNotificationBar) {
        return; // Exit the function immediately
    }
    // 1. Create the style element
    const style = document.createElement('style');
    style.textContent = `
        .notification-bar {
            position: fixed !important;
            font-family: Poppins, sans-serif !important;
            font-weight: 700;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            background-color: #dc0000 !important;
            color: #ffffff !important;
            text-align: center !important;
            padding: 5px 0 !important;
            z-index: 999999999999 !important;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1 !important;
        }
        .notification-bar-text {
          flex-grow: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .notification-button {
            background-color: #fff;
            color: #000;
            font-family: Poppins, sans-serif;
            border: none;
            padding: 5px 10px;
            margin-left: 10px;
            cursor: pointer;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
        }
         .notification-button:hover {
          opacity: 0.8;
        }
        .notification-close {
            cursor: pointer;
            padding: 5px 10px;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000000000000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            text-align: center;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            border-radius: 8px;
            font-family: Poppins, sans-serif;
        }
        .modal-button-container {
          display: flex;
          justify-content: center;
        }
        .modal-button {
            padding: 10px 20px;
            margin: 10px;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-family: Poppins, sans-serif;
        }
        .hide-once {
            background-color: #117aeb;
        }
        .hide-permanently {
            background-color: #dc0000;
        }
        .modal-button:hover {
          opacity: 0.8;
        }
    `;
    // 2. Append styles
    function appendElements() {
        document.head.appendChild(style);
        // 3. Create notification bar elements
        const notificationDiv = document.createElement('div');
        notificationDiv.className = 'notification-bar';
        const notificationTextContainer = document.createElement('span');
        notificationTextContainer.className = 'notification-bar-text';
        const notificationText = document.createElement('span');
        notificationText.textContent = notificationMessage;
        notificationTextContainer.appendChild(notificationText);
        if (showButton) {
            const notificationButton = document.createElement('a');
            notificationButton.className = 'notification-button';
            notificationButton.href = buttonLink;
            notificationButton.textContent = buttonText;
            notificationTextContainer.appendChild(notificationButton);
        }
        const closeButton = document.createElement('span');
        closeButton.className = 'notification-close';
        closeButton.textContent = 'X';
        notificationDiv.appendChild(notificationTextContainer);
        notificationDiv.appendChild(closeButton);
        document.body.insertBefore(notificationDiv, document.body.firstChild);
        // --- Modal creation ---
        const modal = document.createElement('div');
        modal.className = 'modal';
        const modalContent = document.createElement('div');
        modalContent.className = 'modal-content';
        const buttonContainer = document.createElement('div');
        buttonContainer.className = 'modal-button-container';
        const hideOnceButton = document.createElement('button');
        hideOnceButton.className = 'modal-button hide-once';
        hideOnceButton.textContent = 'Hide Once';
        const hidePermanentlyButton = document.createElement('button');
        hidePermanentlyButton.className = 'modal-button hide-permanently';
        hidePermanentlyButton.textContent = 'Hide Permanently';
        buttonContainer.appendChild(hideOnceButton);
        buttonContainer.appendChild(hidePermanentlyButton);
        modalContent.appendChild(buttonContainer);
        modal.appendChild(modalContent);
        document.body.appendChild(modal);
        // --- Event Listeners ---
        closeButton.addEventListener('click', () => {
            modal.style.display = 'block';
        });
        window.addEventListener('click', (event) => {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });
        hideOnceButton.addEventListener('click', () => {
            notificationDiv.style.display = 'none';
            modal.style.display = 'none';
        });
        hidePermanentlyButton.addEventListener('click', () => {
            localStorage.setItem('hideNotificationVersion', notificationVersion);
            notificationDiv.style.display = 'none';
            modal.style.display = 'none';
        });
        // --- Check localStorage on page load ---
        const storedVersion = localStorage.getItem('hideNotificationVersion');
        if (storedVersion &amp;&amp; parseInt(storedVersion, 10) >= notificationVersion) {
            notificationDiv.style.display = 'none';
        }
    }
    // Check document.head
    if (document.head) {
        appendElements();
      } else {
        document.addEventListener('DOMContentLoaded', appendElements);
    }
}
addNotificationBar();
</script>