Using the Webflow CMS API, send data automatically to dynamically refresh content on your website.
Using the Pull from an API and Send to an API steps, 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 a Webflow 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 ID for each item 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.
We import the items, then use a column filter to just keep the IDs.
That looks something like this:
We use Insert row numbers step to give each section something to join on, so that the first row from the API data updates the first item in our list. After that join, we just map the fields and are done!
