Recent Purchase Notification Popup — Free HTML CSS JS FOMO Toast Snippet

A "recent purchase" or "FOMO" notification is the small toast — popularized by tools like Fomo and Proof — that periodically appears in the corner of an e-commerce site showing something like "Jordan D. in New York just bought Wireless Headphones." It's a lightweight social-proof signal that other real people are actively buying, meant to nudge hesitant visitors.

This snippet implements the full cycling behavior in plain HTML, CSS, and vanilla JavaScript, with no third-party social-proof service.

How the notification queue works

A plain array, NOTIFICATIONS, holds a handful of { initials, name, location, product, time } objects. An index variable tracks which one is currently showing, and renderNotification fills the toast's avatar initials, message text, and timestamp from whichever entry is at that index. (index + 1) % NOTIFICATIONS.length advances to the next entry and wraps back to the start once the list is exhausted — so the cycle repeats indefinitely.

How the slide-in/out animation works

The toast sits fixed at bottom: 24px; left: 24px with transform: translateX(-120%) by default — fully off-screen to the left. Adding the .visible class animates it to translateX(0) using a spring-like cubic-bezier(0.22, 1, 0.36, 1) easing curve, which gives a slight overshoot-and-settle feel rather than a plain linear slide.

How the show → wait → hide → cycle loop works

Two named timing constants drive the whole loop: VISIBLE_DURATION (how long each toast stays on screen before auto-hiding) and GAP_BETWEEN (how long the toast stays completely off-screen before the next one appears). showToast() displays the current notification and schedules hideToast() after VISIBLE_DURATION. hideToast() removes the .visible class, advances the index, and schedules the next showToast() after GAP_BETWEEN. Because each function schedules the other via setTimeout, the cycle runs indefinitely without a setInterval, which is important — a fixed interval would fire even while a previous toast's exit animation was still playing, whereas this chained-timeout approach always waits for the current toast's full cycle to finish first.

Manual dismissal

Clicking the × button calls hideToast(true), which behaves identically to the automatic timeout except it schedules the *next* notification slightly further out (GAP_BETWEEN * 1.5) — a small courtesy so a visitor who explicitly closed a toast isn't immediately shown another one.

Accessibility

The toast has role="status" and aria-live="polite", so screen readers announce each new notification's text as it appears, without interrupting whatever the user is currently doing.