Design Preview
4,237
Online
SUBSCRIPTION
Sophia Rodriguez
๐ช๐ธ
Spain
STAY STRONG UNIVERSITY
Integration Code
Kajabi Notification Bar Implementation
<style>
/* Professional Sidebar Notification Bars - 2026 Standards */
.notification-container {
position: fixed;
z-index: 9999;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* LEFT BAR - ONLINE USERS */
.online-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background: linear-gradient(90deg, #0ea5e9, #0284c7);
padding: 15px 10px;
border-radius: 0 12px 12px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 5px 15px rgba(2, 132, 199, 0.4);
border: 2px solid rgba(255, 255, 255, 0.15);
z-index: 1000;
animation: floatLeft 6s ease-in-out infinite;
transform-style: preserve-3d;
transform: perspective(500px) rotateY(-5deg);
width: 70px;
text-align: center;
}
.online-pulse {
width: 15px;
height: 15px;
background: #4ade80;
border-radius: 50%;
animation: pulse 1.5s infinite;
margin-bottom: 5px;
}
.online-count {
font-weight: 700;
font-size: 1.1rem;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
.online-label {
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
/* RIGHT BAR - SUBSCRIPTION PURCHASE */
.subscription-bar {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background: linear-gradient(90deg, #f97316, #ea580c);
padding: 15px 10px;
border-radius: 12px 0 0 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 5px 15px rgba(234, 88, 12, 0.4);
border: 2px solid rgba(255, 255, 255, 0.15);
z-index: 1000;
animation: floatRight 8s ease-in-out infinite;
transform-style: preserve-3d;
transform: perspective(500px) rotateY(5deg);
width: 70px;
text-align: center;
}
.bar-title {
background: rgba(0, 0, 0, 0.3);
padding: 4px 8px;
border-radius: 5px;
font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
margin-bottom: 8px;
}
.notification-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.user-name {
font-weight: 600;
font-size: 0.8rem;
color: white;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
.country-flag {
font-size: 1.4rem;
margin: 5px 0;
}
.country-name {
font-size: 0.7rem;
font-weight: 500;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
.university-text {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
font-weight: 800;
font-size: 1.3rem;
color: #facc15;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
animation: glow 2s ease-in-out infinite alternate;
padding: 8px 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
/* ANIMATIONS */
@keyframes floatLeft {
0%, 100% { transform: perspective(500px) rotateY(-5deg) translateY(-50%); }
50% { transform: perspective(500px) rotateY(-5deg) translateY(calc(-50% - 10px)); }
}
@keyframes floatRight {
0%, 100% { transform: perspective(500px) rotateY(5deg) translateY(-50%); }
50% { transform: perspective(500px) rotateY(5deg) translateY(calc(-50% - 10px)); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes glow {
from { text-shadow: 0 0 10px rgba(250, 204, 21, 0.7); }
to { text-shadow: 0 0 20px rgba(250, 204, 21, 1), 0 0 30px rgba(250, 204, 21, 0.8); }
}
</style>
<div class="notification-container">
<div class="online-bar">
<div class="online-pulse"></div>
<div class="online-count">4,237</div>
<div class="online-label">Online</div>
</div>
<div class="subscription-bar">
<div class="bar-title">SUBSCRIPTION</div>
<div class="notification-content">
<div class="user-name">Sophia Rodriguez</div>
<div class="country-flag">๐ช๐ธ</div>
<div class="country-name">Spain</div>
</div>
</div>
<div class="university-text">STAY STRONG UNIVERSITY</div>
</div>
<script>
// 200 names for notifications
const names = [
"James Smith", "Maria Garcia", "Robert Johnson", "Emma Wilson",
"Michael Brown", "Sophia Rodriguez", "William Davis", "Olivia Martinez",
"David Anderson", "Isabella Taylor", "Joseph Thomas", "Mia Hernandez",
"Charles Moore", "Charlotte Jackson", "Thomas Martin", "Amelia White",
"Christopher Lee", "Harper Thompson", "Daniel Lewis", "Evelyn Walker",
"Matthew Hall", "Abigail Allen", "Anthony Young", "Emily King",
"Mark Wright", "Elizabeth Scott", "Donald Green", "Ella Baker",
"Steven Adams", "Sofia Nelson", "Paul Carter", "Avery Mitchell",
"Andrew Perez", "Scarlett Roberts", "Joshua Turner", "Grace Phillips",
"Kenneth Campbell", "Chloe Evans", "Kevin Parker", "Victoria Edwards",
"Brian Collins", "Riley Stewart", "George Morris", "Aria Sanchez",
"Timothy Rogers", "Lily Reed", "Ronald Cook", "Aubrey Morgan"
// Additional names would be here
];
// 190 countries with flags
const countries = [
{ name: "United States", flag: "๐บ๐ธ" },
{ name: "Canada", flag: "๐จ๐ฆ" },
{ name: "United Kingdom", flag: "๐ฌ๐ง" },
{ name: "Germany", flag: "๐ฉ๐ช" },
{ name: "France", flag: "๐ซ๐ท" },
{ name: "Spain", flag: "๐ช๐ธ" },
{ name: "Italy", flag: "๐ฎ๐น" },
{ name: "Australia", flag: "๐ฆ๐บ" },
{ name: "Japan", flag: "๐ฏ๐ต" },
{ name: "Brazil", flag: "๐ง๐ท" },
// Additional countries would be here
];
// Function to update online users count
function updateOnlineCount() {
const countElement = document.querySelector('.online-count');
const onlineCount = Math.floor(Math.random() * 2000) + 3000;
countElement.textContent = onlineCount.toLocaleString();
}
// Function to show new subscription notification
function showNewSubscription() {
const name = names[Math.floor(Math.random() * names.length)];
const country = countries[Math.floor(Math.random() * countries.length)];
document.querySelector('.user-name').textContent = name;
document.querySelector('.country-flag').textContent = country.flag;
document.querySelector('.country-name').textContent = country.name;
// Add animation effect
const bar = document.querySelector('.subscription-bar');
bar.style.animation = 'none';
setTimeout(() => {
bar.style.animation = 'floatRight 8s ease-in-out infinite';
}, 10);
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
// Set initial values
updateOnlineCount();
showNewSubscription();
// Update online count every 30 seconds
setInterval(updateOnlineCount, 30000);
// Show new subscription every 30 seconds
setInterval(showNewSubscription, 30000);
});
</script>