Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

2 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 ?

bon à savoir

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.

Lorem ipsum dolor sit amet consectetur.

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

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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...