Back to Snippets

Animated Social Proof Popup JS

Boost your sales with an animated social proof popup. We designed a clean notification that slides in securely, which builds instant trust with your visitors and increases conversions.

105

#javascript

#css

#social proof

#popup

#notification

#marketing

#sales

#ecommerce

#ui

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f1f5f9;
  min-height: 100vh;
}

.demo-background {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #0f172a;
}

.social-proof-toast {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 380px;
  z-index: 1000;
  transform: translateY(150px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

.social-proof-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-image img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f1f5f9;
}

.toast-content {
  flex-grow: 1;
}

.toast-title {
  color: #0f172a;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.toast-title span {
  font-weight: 700;
}

.toast-action {
  color: #475569;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.toast-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 600;
}

.toast-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  align-self: flex-start;
  margin-top: -8px;
  margin-right: -8px;
  transition: color 0.2s;
}

.toast-close:hover {
  color: #0f172a;
}

const toast = document.getElementById("proof-toast");
const closeBtn = document.getElementById("close-toast");
const nameEl = document.getElementById("buyer-name");
const cityEl = document.getElementById("buyer-city");
const timeEl = document.getElementById("buyer-time");

/* Safe arrays without bracket notation */
const names = new Array();
names.push("Alex"); names.push("Sarah"); names.push("Michael"); names.push("Emma"); names.push("David");

const cities = new Array();
cities.push("London"); cities.push("New York"); cities.push("Tokyo"); cities.push("Paris"); cities.push("Berlin");

const times = new Array();
times.push("Just now"); times.push("2 minutes ago"); times.push("5 minutes ago"); times.push("10 minutes ago");

function triggerToast() {
  const randName = names.at(Math.floor(Math.random() * names.length));
  const randCity = cities.at(Math.floor(Math.random() * cities.length));
  const randTime = times.at(Math.floor(Math.random() * times.length));
  
  nameEl.innerText = randName;
  cityEl.innerText = randCity;
  timeEl.innerText = randTime;
  
  toast.classList.add("show");
  
  /* Hide automatically after 5 seconds */
  setTimeout(function() {
    toast.classList.remove("show");
  }, 5000);
}

closeBtn.addEventListener("click", function() {
  toast.classList.remove("show");
});

/* Trigger the first toast after 2 seconds, then repeat every 12 seconds */
setTimeout(triggerToast, 2000);
setInterval(triggerToast, 12000);

Animated Social Proof Popup JS

Share Code Snippet