Using Webflow API on the frontend

Hi, im trying to show total amount of CMS items in CMS ID X and render it to a text with class “.users”

Will a script like this work on Webflow? Console says it’s a CORS error, and I have to enable it.

<script>
  var usersText=document.querySelector('.users');
  var apiToken='XXX';
  var collectionId='XXX';
  fetch(`https://api.webflow.com/collections/${collectionId}/items`,{method:'GET',headers:{'Authorization':`Bearer ${apiToken}`}})
  .then(response=>response.json())
  .then(data=>{usersText.textContent=data.total;});
</script>

Unfortunately, you cannot call the Webflow API from client-side script.
It’s specifically configured to disallow that via CORS, because your api token would be exposed, and other could… well… pillage your site. Download your users. Scan through your orders. Populate your CMS with objectionable things. All kinds of fun.

However, I have a couple of CMS counting solutions that might work for you. Which we use depends on what you’re counting… are you needing the total item count per Collection, or are you OK with the published count only?

I’ve been looking for someone with a large CMS, pref 10k items, to performance test these.
Even if yours isn’t at that record count, I’m happy to complete the Cloneable.

Webflow doesn’t allow you to use the API from your frontend code. In order to use the API you have use a secret token to access it. You can think of this secret token like your password. So they block people from using their API from the frontend so people can never add their token/password in code that anyone can view.

An easy way to get the info you’re looking for is to use a free Make (Integromat) account with their Webhooks feature. You can access the Webflow API from it, and deliver your counts. It would be fairly trivial.

Hi Michael,

Thanks for the reply. And sorry for late response.

Haha, 10k items no. 19 =p
But growing.

Published count, or total item count. It will be same for us.

Any help is appreaticed