Aller au contenu

Easter egg3 min lecture

Comment ajouter une note de satisfaction dans Webflow ?

Apprenez à ajouter un widget de notation 5 étoiles en fin d'article Webflow avec persistance en localStorage.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un widget de notation 5 étoiles en fin d'article dans Webflow avec persistance en localStorage.

Exemple

Cet article vous a été utile ?

ÉlémentIDDescription
Conteneur des étoilesstar-ratingLes 5 étoiles sont injectées par le script
Message de confirmationrating-messageAffiché après avoir voté
PersistancelocalStorageLa note est mémorisée par navigateur et par page

1. Créez les éléments dans Webflow

Créez un Div avec l'ID star-rating. Ajoutez un Text Block avec l'ID rating-message juste en dessous, en display: none ou vide par défaut. Le script injecte les étoiles dans star-rating et écrit le message dans rating-message.

(function() {
  var container = document.getElementById('star-rating');
  if (!container) return;

  var KEY = 'rating-' + window.location.pathname;
  var saved = localStorage.getItem(KEY);

  var stars = [];
  var current = 0;

  for (var i = 1; i <= 5; i++) {
    (function(val) {
      var star = document.createElement('span');
      star.textContent = '★';
      star.dataset.val = val;
      star.style.cssText = 'font-size:28px;cursor:pointer;color:#e5e7eb;transition:color 0.15s;margin-right:4px;';
      star.addEventListener('mouseenter', function() { highlight(val); });
      star.addEventListener('mouseleave', function() { highlight(current); });
      star.addEventListener('click', function() {
        current = val;
        highlight(val);
        localStorage.setItem(KEY, val);
        var msg = document.getElementById('rating-message');
        var msgs = ['', 'Merci pour votre retour.', 'Merci, on s'améliore !',
          'Merci !', 'Super, merci !', 'Excellent, merci ! 🎉'];
        if (msg) { msg.textContent = msgs[val]; msg.style.color = val >= 4 ? '#22c55e' : '#6b7280'; }
      });
      container.appendChild(star);
      stars.push(star);
    })(i);
  }

  function highlight(val) {
    stars.forEach(function(s) {
      s.style.color = parseInt(s.dataset.val) <= val ? '#fbbf24' : '#e5e7eb';
    });
  }

  if (saved) { current = parseInt(saved); highlight(current); }
})();

3. Envoyez les notes vers votre CRM (optionnel)

Pour collecter les notes dans votre CRM, ajoutez un fetch vers un webhook Make ou Zapier dans le listener click :

star.addEventListener('click', function() {
  // ... code existant ...
  fetch('https://hook.eu1.make.com/VOTRE_WEBHOOK', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ rating: val, page: window.location.pathname, date: new Date().toISOString() })
  });
});

Conclusion

Un widget de notation simple et mémorable en fin d'article. Cas d'usage :

  • Feedback sur les articles de blog et tutoriels
  • Évaluation des fiches produit ou service
  • Satisfaction sur les pages de documentation

Cet article vous a été utile ?

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!