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?

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

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

Let's discuss