I used Javascript code to load data from external API.
The dummy API I used is,
https://ghibliapi.herokuapp.com/films
Open that URL in your browser. It gives you the movie data in JSON format.
I have presented movies data in cards.
1 - Create a Webflow page and design it with needful elements. Here, I have created a basic structure using Sections, Containers, Divs.
2 - Create classes to style elements as per your needs. Here, I have created a class Card which creates a basic card-like style. Basically, you will need to create all the classes which will be used/applied runtime in the Javascript code. In this example, I need to append the movie data to a card. So I have created the Card class.
3 - Open your page Settings. Scroll down and go to the Custom Code section. Into the Before </body> tag custom code section, start and close a <script> tag. So you will be writing something like this.
<script>
// Your Javascript code goes here
</script>
4 - Write down following code into the <script> tag. I know, everyone doesn't know Javascript, so the necessary comments are added to the code. But those who know Javascript will understand the code.
Here's the Github link to the code.
This is a very small example. Thanks to Tania Rascia, her tutorial helped me build this sample so quickly. You can use other Javascript libraries like jQuery, ReactJS to call the APIs, fetch data, and append it to your Webflow pages.
If you feel your custom code has too many lines, create a .js file of your code, host it on other server or CDN network, and load it in the Before </body> tag section.
Click here for the read-only link.
I hope this will help.
Any questions? Reach me at gautam@sprintcube.com
Thank you!