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ément | ID | Description |
|---|---|---|
| Conteneur des étoiles | star-rating | Les 5 étoiles sont injectées par le script |
| Message de confirmation | rating-message | Affiché après avoir voté |
| Persistance | localStorage | La 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.
2. Ajoutez le script dans Footer code
(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 ?


