Dynamically update a Webflow CMS and website content with data from APIs
Using the Webflow CMS API, send data automatically to dynamically refresh content on your website
Connecting Parabola to Webflow is an easy way to supercharge your website. If you are unfamiliar with Webflow, check them out here!
The broad strokes
Using the API Import and API Export, Parabola can pull in your CMS items from your Webflow site, and make update to them, automatically. Taking this one step further, you can use an API to fuel the content on your Webflow website, without writing any code. That's what we did in this example.
We found a novel API the returns information about cocktails, which is pretty awesome. So this example was built as a way to fuel a website with that data.
The general explanation is that this flow pulls in random drinks from the API, reformats the data, and sends it into the Webflow CMS.
You can break the flow into a few logical groups. The first group, pictured in this screenshot, pulls in 6 random cocktails, removes any duplicates, and then keeps 3 of them. This is to ensure that the 3 API calls to pull in random cocktails do not produce any duplicates.
Many times APIs will give back results in a format that is not ideal to your use. Good thing you have a tool like Parabola that can reformat it! This next section reformats the data into the format that we need for the website.
This next section takes all of the ingredients and instructions, and merges them into larger paragraph blocks, since we want to display them in a single element in our website. This is a cosmetic choice, but it illustrates a way to merge values that are in separate fields.
The section after that formatting takes all of the data, and combines it. In a parallel branch, the image field is pulled in. Because images are a little more complicated to update, there are a few extra steps that are used to format the field that holds the image, and update it with a new image.
In this section, we are using an API Import to pull in the existing collection items from Webflow. We want to update existing items, so at some point we needed to get the _ids from Webflow into Parabola. This is that time.
If you want to do what we did in this flow, and update existing items held in the CMS on each run, then you need a section like this, where you bring in the _id field for each item.
Now that we have all of our data in one place, and we have the _ids of the collection items, we can construct the JSON payload that we will send to the Webflow CMS API.
The API endpoint that we are looking to use is that dedicated to Patch an existing Collection Item. Patch is nice because it allows us to just send the fields that we want to update, and those we do not specify changes to remain the same. Compare that to a PUT, where any field you do not specify is cleared of its value.
The Webflow CMS API specifies that the data payload for the PATCH request we would like to make should be a JSON object called fields the contains all of the fields to update and their new values.
That looks something like this:
The final section of the flow uses some Text Merge steps to create the JSON blob that will successfully deliver the content to the API.