Dynamic Banner above header

Custom Coding
1

Hi Team,

I have created a small snippet where on the basis of user who logs in banner details will change. Below things this code is doing.

  1. Get the notification number and put the dynamic value.
  2. If there is no notification, no banner will be displayed.
  3. On click it will be easy navigate to the desired page.
<script>
(function() {
  const configObj = {
    selectedBackgroundColor: "#f8bf13",
    selectedTextColor: "#332e77",
    bannerHeight: "48px",
    fontSize: "14px"
  };

  function fetchData() {
    const raw = window['logged_in_user']?.NotificationIndicator;
    const count = (raw === "" || raw == null) ? 0 : Number(raw);
    return count;
  }

  function createNotificationBanner(obj, count) {
    // push content down
    document.body.style.paddingTop = obj.bannerHeight;

    // banner container
    const banner = document.createElement('div');
    Object.assign(banner.style, {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: obj.bannerHeight,
      backgroundColor: obj.selectedBackgroundColor,
      color: obj.selectedTextColor,
      cursor: 'pointer',
      zIndex: 10000
    });

    // centered text
    const text = document.createElement('div');
    text.innerText = `🔔 You have ${count} new notification${count > 1 ? 's' : ''}`;
    Object.assign(text.style, {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      fontSize: obj.fontSize,
      whiteSpace: 'nowrap'
    });
    banner.appendChild(text);

    // close button
    const closeBtn = document.createElement('button');
    closeBtn.innerText = '×';
    Object.assign(closeBtn.style, {
      position: 'absolute',
      top: '50%',
      right: '16px',
      transform: 'translateY(-50%)',
      background: 'transparent',
      border: 'none',
      fontSize: '20px',
      cursor: 'pointer',
      color: obj.selectedTextColor
    });
    closeBtn.addEventListener('click', e => {
      e.stopPropagation();
      banner.remove();
      document.body.style.paddingTop = '';
    });
    banner.appendChild(closeBtn);

    // banner click opens modal
    banner.addEventListener('click', e => {
      if (e.target !== closeBtn) showNotificationModal();
    });

    document.body.insertBefore(banner, document.body.firstChild);
  }

  function showNotificationModal() {
    if (document.getElementById('notification-modal')) return;
    const modal = document.createElement('div');
    modal.id = 'notification-modal';
    Object.assign(modal.style, {
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%,-50%)',
      width: '90vw',
      height: '90vh',
      background: '#fff',
      boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
      zIndex: 10001,
      overflow: 'hidden'
    });

    const iframe = document.createElement('iframe');
    iframe.src = '<Your URL>';
    Object.assign(iframe.style, {
      width: '100%',
      height: '100%',
      border: 'none'
    });
    modal.appendChild(iframe);

    const closeModal = document.createElement('button');
    closeModal.innerText = '×';
    Object.assign(closeModal.style, {
      position: 'absolute',
      top: '8px',
      right: '12px',
      background: 'rgba(0,0,0,0.1)',
      border: 'none',
      fontSize: '24px',
      cursor: 'pointer',
      zIndex: 10002
    });
    closeModal.addEventListener('click', () => modal.remove());
    modal.appendChild(closeModal);

    document.body.appendChild(modal);
  }

  function init() {
    const count = fetchData();
    if (count > 0) createNotificationBanner(configObj, count);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>
1 Like