How to Display Social Proof Notifications in Webflow

Learn how to display animated social proof notifications in Webflow to build visitor trust.

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to display animated social proof notifications in Webflow to build trust and reduce visitor hesitation.

Example

Notifications in rotation — a new one every 4 seconds

Parameter	Value	Description
notifications	Array of objects	List of actions to display in rotation
Display delay	4000ms	How long each notification stays visible
Initial delay	3000ms	Wait time before the first notification
Container ID	social-proof-notif	Element injected by the script

1. Create the container in Webflow

Create a Div with the ID social-proof-notif and set it to Fixed position, bottom: 24px, left: 24px, z-index: 9999. Give it this style: white background, 12px border radius, border, padding, subtle box shadow. Set it to display: none by default — the script handles the display.

2. Customize the notifications

Edit the notifications array with your own data. For real data, connect the array to your CRM with a fetch to your API or a Make/Zapier webhook that feeds a JSON endpoint.

3. Add the script in Footer code

(function() {
  var notifications = [
    { name: 'Sophie M.', action: 'requested a demo', time: '2 min ago', avatar: 'SM' },
    { name: 'Thomas K.', action: 'just reached out', time: '5 min ago', avatar: 'TK' },
    { name: 'Léa D.', action: 'downloaded the guide', time: '8 min ago', avatar: 'LD' },
    { name: 'Marc P.', action: 'requested a demo', time: '12 min ago', avatar: 'MP' },
    { name: 'Clara R.', action: 'just reached out', time: '15 min ago', avatar: 'CR' },
  ];
  var container = document.getElementById('social-proof-notif');
  if (!container) return;

  var idx = 0;

  function showNext() {
    var notif = notifications[idx % notifications.length];
    idx++;

    container.innerHTML =
      '' +
      '' +
      notif.avatar + '
' +
      '' + notif.name + ' ' + notif.action + '
' +
      '' + notif.time + '
';

    container.style.opacity = '1';
    container.style.transform = 'translateY(0)';

    setTimeout(function() {
      container.style.opacity = '0';
      container.style.transform = 'translateY(8px)';
      setTimeout(showNext, 1500);
    }, 4000);
  }

  container.style.cssText += 'transition:opacity 0.4s,transform 0.4s;opacity:0;transform:translateY(8px);';
  setTimeout(showNext, 3000);
})();

good to know

These notifications are fake by default. For notifications based on real actions, connect the script to your CRM or analytics tool: pull the latest conversions through an API and populate the array dynamically. Real notifications convert 3x better than fake ones because they hold up against skeptical, informed visitors.

Conclusion

Social proof notifications reduce purchase anxiety by showing that other people trust your brand. Use cases:

Pricing pages with demo request notifications
Download pages with a download counter
Signup pages with recent member actions

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss