Easter egg

3 min

How to Add a Star Rating at the End of a Webflow Article

Learn how to add a 5-star rating widget at the end of a Webflow article, with localStorage persistence.

In this tutorial, Sandro, co-founder of Gemeos Agency, a Webflow agency, shows you how to add a 5-star rating widget at the end of an article in Webflow, with localStorage persistence.

Example

Was this article helpful?

Element	ID	Description
Star container	star-rating	The 5 stars are injected by the script
Confirmation message	rating-message	Shown after voting
Persistence	localStorage	The rating is saved by browser and by page

1. Create the elements in Webflow

Create a Div with the ID star-rating. Add a Text Block with the ID rating-message just below it, set to display: none or left empty by default. The script injects the stars into star-rating and writes the message into rating-message.

2. Add the script in 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 = ['', 'Thanks for your feedback.', 'Thanks, we're improving!',
          'Thanks!', 'Great, thanks!', 'Excellent, thanks! 🎉'];
        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. Send ratings to your CRM (optional)

To collect ratings in your CRM, add a fetch to a Make or Zapier webhook in the click listener:

star.addEventListener('click', function() {
  // ... existing code ...
  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() })
  });
});

good to know

localStorage saves the rating by browser and by device. A visitor who gives 5 stars on desktop and comes back on mobile won't see their previous rating. For cross-device persistence, you need a backend (Supabase, Airtable) or a cookie-based system. For purely UX use cases — like preventing repeat votes on every visit — localStorage is enough.

Conclusion

A simple, memorable rating widget at the end of an article. Use cases:

Feedback on blog posts and tutorials
Rating product or service pages
Satisfaction on documentation pages

Was this article helpful?

How to Add a Star Rating at the End of a Webflow Article

Example

1. Create the elements in Webflow

2. Add the script in Footer code

3. Send ratings to your CRM (optional)

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials