Hi Guys,
I have found a quick way to show the bell icon with the notification, This notification will not appear on the header, but it work as side widget. Check the screenshot.
Small code snippet:
<style>
/* Slide-out notifications panel */
#edge-panel {
position: fixed;
top: 80px; /* adjust to sit just below header/avatar */
right: 0;
width: 40px;
background: #720247;
border-radius: 8px 0 0 8px;
transition: width .3s ease;
overflow: hidden;
z-index: 10000;
}
#edge-panel:hover {
width: 60px;
}
#edge-panel .icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px; /* internal padding around the bell */
cursor: pointer;
}
#edge-panel .icon-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
#edge-panel .icon-btn .badge {
position: absolute;
top: 4px;
right: 4px;
background: #D32F2F;
color: #fff;
font-size: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
(function(){
// hide inside modal iframes
if (window !== window.parent) return;
const user = window.logged_in_user || {};
const count = Number(user.NotificationIndicator || 0);
if (count < 1) return; // no notifications → no panel
// build panel
const panel = document.createElement('div');
panel.id = 'edge-panel';
// bell button
const bellBtn = document.createElement('div');
bellBtn.className = 'icon-btn';
bellBtn.innerHTML = `
<svg viewBox="0 0 24 24">
<path d="M12 2C10.9 2 10 2.9 10 4v1.1
c-2.8.5-5 3-5 6v5L3 18v1h18v-1l-2-1v-5
c0-3-2.2-5.5-5-6V4c0-1.1-.9-2-2-2z"/>
<path d="M12 22c1.1 0 2-.9 2-2h-4
c0 1.1.9 2 2 2z"/>
</svg>
<span class="badge">${count}</span>
`;
bellBtn.addEventListener('click', () =>
openModal('Your URL')
);
panel.appendChild(bellBtn);
document.body.appendChild(panel);
// modal opener
function openModal(url) {
if (document.getElementById('floating-modal')) return;
const modal = document.createElement('div');
modal.id = 'floating-modal';
Object.assign(modal.style, {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
width: '90vw', /* leaves 5vw gap each side */
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 = url;
Object.assign(iframe.style, {
width: '100%',
height: '100%',
border: 'none'
});
const closeBtn = document.createElement('button');
closeBtn.innerText = '×';
Object.assign(closeBtn.style, {
position: 'absolute',
top: '8px',
right: '12px',
background: 'rgba(0,0,0,0.1)',
border: 'none',
fontSize: '24px',
cursor: 'pointer',
zIndex: 10002
});
closeBtn.addEventListener('click', () => modal.remove());
modal.append(iframe, closeBtn);
document.body.appendChild(modal);
}
})();
</script>
