Social Proof Notification Generator

<style>
.sp-popup{position:fixed;bottom:20px;left: 20px;background:#ffffff;border-radius:10px;padding:14px 18px;box-shadow:0 4px 20px rgba(0,0,0,0.12);font-family:system-ui,sans-serif;z-index:9999;max-width:320px;display:none;animation:sp-slide .4s ease}
.sp-popup.active{display:flex;align-items:center;gap:12px}
.sp-popup .sp-icon{width:40px;height:40px;border-radius:50%;background:#6366f120;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.sp-popup .sp-text{font-size:13px;color:#1a1a2e;line-height:1.4}
.sp-popup .sp-name{font-weight:600}
.sp-popup .sp-time{font-size:11px;opacity:.5;margin-top:2px}
.sp-popup .sp-close{position:absolute;top:6px;right:8px;background:none;border:none;font-size:14px;color:#1a1a2e;opacity:.4;cursor:pointer}
@keyframes sp-slide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
</style>

<div class="sp-popup" id="spPopup">
  <div class="sp-icon">&#128722;</div>
  <div>
    <div class="sp-text"><span class="sp-name"></span> <span class="sp-action"></span><span class="sp-item"></span></div>
    <div class="sp-time"></div>
  </div>
  <button class="sp-close">&times;</button>
</div>

<script>
(function(){var d=[{"name":"Sarah M.","action":"just purchased","item":"Premium Plan","time":"2 minutes ago"},{"name":"John D.","action":"just signed up for","item":"Free Trial","time":"5 minutes ago"},{"name":"Emily R.","action":"just purchased","item":"Starter Pack","time":"8 minutes ago"},{"name":"Mike W.","action":"just upgraded to","item":"Pro Plan","time":"12 minutes ago"}],el=document.getElementById("spPopup"),i=0;
function show(){el.querySelector(".sp-name").textContent=d[i].name;
el.querySelector(".sp-action").textContent=d[i].action+" ";
el.querySelector(".sp-item").textContent=d[i].item;
el.querySelector(".sp-time").textContent=d[i].time;
el.classList.add("active");
setTimeout(function(){el.classList.remove("active");i=(i+1)%d.length;setTimeout(show,3000)},4000)}
setTimeout(show,2000);
el.querySelector(".sp-close").addEventListener("click",function(){el.classList.remove("active")});})();
</script>