Ajouter

Lorem ipsum

Lorem ipsum

Easter egg

16 vues

3 min

Comment ajouter une note de satisfaction étoiles en fin d'article 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.

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

bon à savoir

localStorage mémorise la note par navigateur et par appareil. Un visiteur qui note 5 étoiles sur desktop et revient sur mobile ne verra pas sa note précédente. Pour une persistance cross-device, il faut un backend (Supabase, Airtable) ou un système de cookies. Pour un usage purement UX (éviter de revoter à chaque visite), localStorage est suffisant.

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

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

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

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

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...