CMS API JavaScript code error

Design help Data API
1

Hello,

I wrote a JavaScript code to connect to a CMS Collection:

const webflow = new Webflow({ token: 'API Token' });
const items = webflow.items({ collectionId: 'Collection ID' }, { limit: 1 });
items.then(i => console.log(i));

Of course, the collection ID and the API token are just omitted out. I tested them on URL, they are correct. But I receive the following Error on Chrome:

Error

Just a note, I did not call any script files. Should I? My JavaScript is still young. What am I missing?

2

Where are you trying to run the code?

3

In the “before /body tag” of the page.

4

@Amjad - If you are trying to run the API on a webflow site, hold up. The API is not designed to be run from your Webflow site. Your credentials would be visible to anyone inspecting the source, which could then be used to do anything the user wants to your site. Including deleting it.

5

@webdev - I tried Zapier. I cannot figure out how to inquire the collection item that I need to update. There is no search action for Webflow. I cannot set one collection item ID for the update. It could be anyone of 30. So for every real-time update, I need to know the item ID on spot. Webflow does not have good help documents for Zapier and Zapier does not have good help documents for Webflow.

6

The Webflow JavaScript library is designed to be used in Node.js, so in a backend on a server that is not exposed to the whole world. While technically possible to run on the front end this is a very bad idea.

What exactly are you trying to do? Might be able to point you in the right direction if you can explain your use case.

8

@jasondark - I have a page showing a list of 30 days of the month of Ramadan. The idea is to allow the users to sign up to organise an Iftar (breakfast at sunset). The user clicks “book” for any day of their choice and fill in a form in a modal pop-up.

The code (you can find in the custom code of the page itself), was supposed to fill in the Organiser name, phone and email for the day that the user clicked “book” for. The data is submitted to the same collection that is already showing the 30 days.

That simple.

Here is a link to the preview: https://preview.webflow.com/preview/masjidlutwyche?utm_source=masjidlutwyche&preview=b418ad8869db99f25e1ef1c7dc3c5a60

Please note that I am new to JavaScript, but know the logic of programming. I would really appreciate it if you can help, especially that Ramadan is only 3 weeks away.

Let me know if you have questions.

9

Ok makes sense now. So you’ve got a few options here:

  • Use a Webflow form to caputre the organiser’s details. Then use Zapier to take the form submission data and add an item to the corresponding Webflow CMS collection.
  • Write your own form and back end to receive the data and update the Webflow CMS collection using the Webflow CMS API.
  • Do it manually

If you go down the Zapier path, as far as I know there is no pre built Zap that takes a Webflow form submission and directly creates a Webflow CMS item. However there is a prebuilt Zap that adds a Webflow form submission as a row in a Google Sheet, and there is another Zap that creates Webflow CMS items from rows in a Google sheet. So you could hack something together this way:

Webflow form submission => Zap creates row in sheet => Zap creates CMS item from row and publishes it.

2 Likes