With Ycode, you can connect to any API and use their data in your project.
For example, want to show the weather in your location on your page? Quickly connect to a weather API of your choice and the temperature will show in real-time on your website!
Or, maybe you’re looking to build a dashboard that includes statistics from different APIs. The possibilities are endless.
Adding external API data
To get started, first head to the Databases section. Then select the + sign next to External APIs and in the dropdown menu, press Other. This creates a new subtab with the name New external source.
We’ll illustrate this functionality with an example from The Sports DB.
Give your connection a name, for example: All sports list
Add the Base URL, for instance: https://www.thesportsdb.com/api/v1/json/1/all_sports.php
Load the Response. You’ll see generated data such as
Select the option to cache response data to improve page and endpoint performance. By default, the time is set to 10 minutes
Finally, save, duplicate or delete your new connection
Note: If an API requires authorization, you will need to add an Authorization Bearer Token as well.
Displaying external API data
Let’s continue with the external API example above. Here’s how to showcase the API data in your Ycode canvas.
In the Canvas, open the Layers sidebar and add a Div block
Select the All sports list source in the Settings panel
Add another Div block and select the Sports source
Add elements to display data. For example, add a heading and paragraph
Assign data keys to these elements
That’s it. You should now see the external API data displayed on your canvas.