How to display data from external API in Webflow - Part 1

Hey there! In this guide, we'll walk you through the process of displaying data from external APIs on your Webflow site. We'll cover three main steps: setting up Webflow, understanding the JavaScript code required, and swapping out APIs if needed. Let's get started!

Step 1: Setting Up Webflow

1. Create a Container: First, you need to create a container in Webflow where the data from the API will be injected. In our example, we'll use a grid. Click the "+" button, select the grid icon, and create a new grid element.
2. Assign an ID: Once you've created the grid, click the settings icon and assign it a unique ID. This ID will tell the JavaScript where to look before injecting the data. We'll call our grid "cards-container".
3. Create a Sample Card: Next, create a sample card that will serve as a template for displaying each data item. Add a div block and style it as desired. Our sample card includes an image, an H3 tag, and a paragraph tag.
4. Hide the Sample Card: After creating the sample card, hide it by adding a "hide" class with `display: none;` so it doesn't show up when listing all the results.
5. Add JavaScript: In the page settings, scroll down to the "Before Body Tag" section. If there's no open and closed `