How to Display a View Counter on Webflow Articles

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to display a view counter on your Webflow articles with CounterAPI

Example

Understanding CounterAPI

CounterAPI is a free service that exposes a simple REST API for incrementing and reading counters. Each counter is identified by a namespace and a key. The /v1/namespace/key/up call increments the counter and returns the current value in a single request.

1. Add a Text Block to display views

In Webflow, create a Text Block with the ID view-count where you want to display the view count (article header, near the date...).

2. Set a unique key for each article

Each article needs a unique key. The script automatically uses the URL slug as the key: /academy/mon-article becomes academy-mon-article. No manual setup needed.

3. Add the script in Footer code

Replace gemeos with your own namespace in the script. The namespace keeps your counters separate from other CounterAPI users.

(function() {
  var el = document.getElementById('view-count');
  if (!el) return;

  var key = window.location.pathname.replace(/\/\//g, '-').replace(/^-|-$/g, '') || 'home';
  var namespace = 'gemeos'; // Replace with your namespace

  fetch('https://api.counterapi.dev/v1/' + namespace + '/' + key + '/up')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var count = data.count || 0;
      el.textContent = count.toLocaleString('fr-FR') + ' view' + (count > 1 ? 's' : '');
    })
    .catch(function() {
      el.textContent = '';
    });
})();

4. Read-only mode (no increment)

To display the counter without incrementing it (in preview or for admins), use /get instead of /up:

fetch('https://api.counterapi.dev/v1/' + namespace + '/' + key + '/get')

Conclusion

CounterAPI is the fastest way to display views on Webflow without a backend. Use cases:

• View counter on blog articles
• Popularity of resources in a library
• Social proof on landing pages ("already viewed 1,240 times")