OneTaskBy Tim King · Updated
Social Proof Popup
Recent Activity Notification in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Social Proof Popup works
A social proof popup is a small notice in a corner of the page that shows recent activity, such as someone buying, signing up or leaving a review. Enter your messages, pick the timing and corner, and copy the HTML, CSS and JavaScript. It cycles through the list and can be switched off with one click.
Seeing that other people are acting right now reassures new visitors. Used lightly, these notices nudge people who are close to deciding. Shown too often, they get in the way and feel pushy.
How the social proof popup works
The messages are stored as JSON in a data-messages attribute. A short script shows the first one
after two seconds, hides each after five, and moves to the next on a timer. The close button stops
the cycle for the rest of the visit. If the popup is removed from the page, the timer stops itself.
Accessibility
The popup has role="status", a polite live region, so screen readers announce each message when
they finish what they are reading instead of cutting in. The close button has a clear label, and
with reduced motion switched on the popup fades without sliding.
FAQ
Should the messages be real?
Yes. Made-up activity is misleading, and consumer protection rules in many places treat fake purchase or review notices as unfair practice. Feed the messages from real orders or sign-ups, or use honest totals such as a count of customers.
How do I show live orders?
Build the data-messages list on the server from recent real events, or fetch them from your own
API and replace the messages array in the script. Keep names vague, such as first name and city,
to protect customer privacy.
How often should the popup appear?
Every eight to twenty seconds is common. Fewer, well-spaced messages work better than a constant stream, and it helps to stop after a handful per visit so the page does not keep interrupting.
Does it hurt page speed or SEO?
No. The script is tiny, runs after the page has loaded, and the popup sits in a fixed corner, so it does not move page content or cause layout shift.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Trust Badge Strip
Build a row of trust badges with inline SVG icons.
Review Stars
Make accessible partial star ratings with one CSS variable.
Stats Counter
Build a row of stats that count up when scrolled into view.
Countdown Timer
Build a days, hours, minutes and seconds countdown to any date.
CTA Banner Builder
Build a call to action banner with a button and secondary link.