API Filler

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]

<script src="https://tools.refokus.com/api-filler/bundle.v1.0.0.js"></script>

Everything is made using custom attributes, so when we say “Add” that  means “Add a custom attribute”.

• Add [.c-tool_tag]r-api-filler="URL"[.c-tool_tag] to the wrapper element where you want the API data displayed, and place your chosen API URL where it says URL in the code snippet.

• Add [.c-tool_tag]r-api-loop="Property Name"[.c-tool_tag] to an element if you would like it to loop, in our demo we placed this on the ‘slide’ element in our slider. To do this, place the property name from your API in the code snippet, you should be able to find this in your chosen API’s documentation. 

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”. 

• Add [.c-tool_tag]r-api-text="data selector"[.c-tool_tag] to the text elements.
• Add [.c-tool_tag]r-api-img="data selector"[.c-tool_tag] to images.
• Add [.c-tool_tag]r-api-link="data selector"[.c-tool_tag] to links.
• Add [.c-tool_tag]r-api-html="data selector"[.c-tool_tag] to HTML embeds.

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.