Use the Refokus API Filler to fetch data from public databases and display it within your Webflow projects. In our demo, we use the Art Institute of Cleveland's API to present famous artwork, along with the artist and the year it was composed.
[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]
Everything is made using custom attributes, so when we say “Add” that means “Add a custom attribute”.
The API that we used in the demo had the property name “data”, which we can see below in the example response from the API, and we can also see how we implemented that into Webflow.
Now we want to place the API data onto the Webflow elements. To do this, we want to add the attributes below with [.c-tool_tag]data.X[.c-tool_tag] except we want to place the property names of the data we want to use here. For example, in our demo, we use [.c-tool_tag]data.creation_date[.c-tool_tag] to display the date the image was composed.
One thing to note here is that [.c-tool_tag]data.[.c-tool_tag] shouldn’t be changed, our tool is built to read your API’s property name automatically, so you don’t have to keep inputting it, it’s merely a coincidence that the property name for the API we used is also called “data”.
You can also add [.c-tool_tag]remove-empty="1"[.c-tool_tag] to any of these elements to hide them in case there is no data to show.