How to Create a Remaining Spots Counter in Webflow

fetch('https://api.airtable.com/v0/YOUR_BASE/Registrations?fields[]=Status', {
  headers: { 'Authorization': 'Bearer YOUR_KEY' }
})
.then(function(r) { return r.json(); })
.then(function(data) {
  var taken = data.records.filter(function(r) {
    return r.fields.Status === 'Confirmed';
  }).length;
  // Update the UI with taken
});

(function() {
  var el = document.getElementById('seats-left');
  var bar = document.getElementById('seats-bar');
  var msg = document.getElementById('seats-message');
  if (!el) return;

  // Configuration
  var TOTAL = 20;
  var KEY = 'seats-taken-' + window.location.pathname;

  // Retrieve or initialize the counter (simulated on the client side)
  // In production: replace with a fetch to your API
  var taken = parseInt(localStorage.getItem(KEY) || Math.floor(Math.random() * 8 + 10));
  localStorage.setItem(KEY, taken);

  var left = Math.max(0, TOTAL - taken);
  var pct = Math.round((taken / TOTAL) * 100);

  el.textContent = left;

  if (bar) {
    bar.style.width = pct + '%';
    bar.style.background = left <= 3 ? '#ef4444' : left <= 7 ? '#f59e0b' : '#22c55e';
  }

  if (msg) {
    if (left === 0) {
      msg.textContent = 'Full — join the waitlist';
      msg.style.color = '#ef4444';
    } else if (left <= 3) {
      msg.textContent = 'Only ' + left + ' spot' + (left > 1 ? 's' : '') + ' left!';
      msg.style.color = '#ef4444';
    } else if (left <= 7) {
      msg.textContent = left + ' spots left — book now';
      msg.style.color = '#f59e0b';
    } else {
      msg.textContent = left + ' spots available';
      msg.style.color = '#22c55e';
    }
  }
})();