So, you love Webflow but wish it could magically pull in dynamic content? Good news: it can! 😎 In this guide, we’ll create a simple Webflow page (no CMS required) and fill it with data from a third-party API.
Imagine pulling in the latest blog posts, weather updates, or even cat facts 🐱—all dynamically, without touching the CMS. Let’s do it!
Step 1: Choose an API to Pull Data From
For this tutorial, we’ll grab blog articles using the free JSONPlaceholder API. It provides dummy blog posts—perfect for testing.
🔗 API Endpoint: This API returns fake blog posts with titles and content, which we’ll display on our Webflow page.
https://jsonplaceholder.typicode.com/posts
Step 2: Set Up Your Webflow Page
Before we add magic (a.k.a. JavaScript), let’s build the layout in Webflow.
1️⃣ Add Elements to Your Page
- A Heading (
h1) → Give it the class blog-title - A Paragraph (
p) → Give it the class blog-content - A Button (
a) → Give it the class blog-link
🌟 Pro Tip: Wrap everything inside a div with the class blog-container to keep things organized!
2️⃣ Publish Your Webflow Page
Hit Publish so we can test our API magic in action.
Step 3: Fetch and Populate API Data with JavaScript
Now for the fun part! We’ll use JavaScript’s Fetch API to grab blog posts and insert them into Webflow elements.
1️⃣ Add Custom Code to Webflow
- Go to Webflow Designer → Page Settings → Before
</body>Code - Paste this JavaScript inside:
<script>
// Fetch blog posts from the API
fetch("https://jsonplaceholder.typicode.com/posts?_limit=5") // Get only 5 posts
.then(response => response.json())
.then(data => {
let blogContainer = document.querySelector('.blog-container');
blogContainer.innerHTML = ''; // Clear existing content
data.forEach(post => {
let blogItem = `
<div class="blog-item">
<h2 class="blog-title">${post.title}</h2>
<p class="blog-content">${post.body}</p>
<a href="#" class="blog-link">Read More</a>
</div>
`;
blogContainer.innerHTML += blogItem;
});
})
.catch(error => console.error("Error fetching blog posts:", error));
</script>
🔥 What This Does:
✅ Fetches 5 blog posts from the API
✅ Inserts them inside the .blog-container div
✅ Updates the page dynamically when loaded
Step 4: Style It to Look Awesome
Right now, our page is functional but... kinda ugly. Let's fix that! 🎨
Go to Webflow Designer → Embed Code and add this inside a <style> tag:
<style>
.blog-container {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
margin: auto;
}
.blog-item {
background: #f9f9f9;
padding: 15px;
border-radius: 10px;
}
.blog-title {
font-size: 20px;
color: #333;
}
.blog-content {
color: #666;
}
.blog-link {
color: #007BFF;
text-decoration: none;
font-weight: bold;
}
</style>
🎨 What This Does:
✔️ Adds space between blog posts
✔️ Gives each post a clean card-like design
✔️ Styles the links and fonts
Bonus: Auto-Refresh Content Every Few Minutes
Want fresh content without refreshing the page? Add this inside your <script> tag:
setInterval(() => {
location.reload();
}, 300000); // Refresh every 5 minutesNow your Webflow page stays fresh without users lifting a finger! 🕶️
Final Thoughts 🎯
And that’s it! You’ve just built a dynamic Webflow page that pulls in real-time blog posts—no CMS required.
🚀 What You Learned:
✅ How to set up a Webflow page with static elements
✅ How to fetch and display third-party API data
✅ How to style and refresh it dynamically
Now, go impress your clients, add some APIs to your portfolio, or just enjoy a fully automated Webflow site. 😎
