Comment afficher des notifications de social proof dans Webflow ?

(function() {
  var notifications = [
    { name: 'Sophie M.', action: 'a demandé une démo', time: 'il y a 2 min', avatar: 'SM' },
    { name: 'Thomas K.', action: 'vient de nous contacter', time: 'il y a 5 min', avatar: 'TK' },
    { name: 'Léa D.', action: 'a téléchargé le guide', time: 'il y a 8 min', avatar: 'LD' },
    { name: 'Marc P.', action: 'a demandé une démo', time: 'il y a 12 min', avatar: 'MP' },
    { name: 'Clara R.', action: 'vient de nous contacter', time: 'il y a 15 min', 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 =
      '<div style="display:flex;align-items:center;gap:12px;">' +
      '<div style="width:36px;height:36px;border-radius:50%;background:#a78bfa;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#fff;flex-shrink:0;">' +
      notif.avatar + '</div>' +
      '<div><p style="font-size:13px;font-weight:500;color:#111;margin:0;">' + notif.name + ' ' + notif.action + '</p>' +
      '<p style="font-size:12px;color:#9ca3af;margin:0;">' + notif.time + '</p></div></div>';

    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);
})();