Sales Pop Notification Generator
Create rotating sales popup notifications showing recent purchases. Display product names, locations, and verified badges to boost conversions.
Live Preview
🛒
Someone purchased Premium Plan
2 minutes ago
✓ Verified purchase
Generated Code
<style>
.salp-popup{position:fixed;bottom:20px;left:20px;background:#ffffff;border-radius:12px;padding:14px 18px;box-shadow:0 6px 24px rgba(0,0,0,0.15);font-family:system-ui,sans-serif;z-index:9999;max-width:340px;display:none;animation:salp-in .4s ease}
.salp-popup.active{display:flex;align-items:center;gap:12px}
.salp-img{width:48px;height:48px;border-radius:8px;background:#6366f115;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}
.salp-body{font-size:13px;color:#1a1a2e;line-height:1.4}
.salp-product{font-weight:700;color:#6366f1}
.salp-loc{font-size:11px;opacity:.6;margin-top:2px}
.salp-verified{font-size:11px;color:#22c55e;margin-top:2px}
.salp-close{position:absolute;top:6px;right:10px;background:none;border:none;font-size:14px;color:#1a1a2e;opacity:.3;cursor:pointer}
@keyframes salp-in{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
</style>
<div class="salp-popup" id="salpPop">
<div class="salp-img">🛒</div>
<div class="salp-body">
<div>Someone purchased <span class="salp-product"></span></div>
<div class="salp-loc"><span class="salp-time"></span></div>
<div class="salp-verified">✓ Verified purchase</div>
</div>
<button class="salp-close">×</button>
</div>
<script>
(function(){var d=[{"product":"Premium Plan","location":"New York, US","time":"2 minutes ago"},{"product":"Starter Pack","location":"London, UK","time":"5 minutes ago"},{"product":"Pro Bundle","location":"Sydney, AU","time":"8 minutes ago"},{"product":"Basic Plan","location":"Toronto, CA","time":"12 minutes ago"}],el=document.getElementById("salpPop"),i=0;
function show(){var s=d[i];el.querySelector(".salp-product").textContent=s.product;
el.querySelector(".salp-loc").textContent=s.location;
el.querySelector(".salp-time").textContent=s.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(".salp-close").addEventListener("click",function(){el.classList.remove("active")})})();
</script>Sales Items
#1
#2
#3
#4