Dynamic API for Elementor
Display content on your Elementor site using external APIs without writing code.
Display content on your Elementor site using external APIs without writing code.
Easily connect to any REST API endpoint and display the data inside your Elementor pages. Whether it’s product details, form submissions, weather info, or data from your CRM — the widget helps you bring external data directly into your site without coding.
Easily map API fields in the widget using the Response Template. For example, show product names, prices, and images fetched directly from your API response. You decide which data gets displayed and how it’s styled.
The Dynamic API widget includes a Response Template editor that lets you map API fields and control exactly how data is displayed.
Loop through arrays – Display lists of items such as products, posts, or categories.
Single values – Show individual fields like a name, price, or date.
Nested data – Extract values from inside objects or arrays.
Custom formatting – Combine API fields with your own text to create meaningful output.
{
"articles": [{
"id": 123,
"author": "John Doe",
"date": "2025-08-30",
"tags": ["AI","Innovation", "Technology"],
"title": "The Future of AI",
"content": "Artificial Intelligence is evolving at an unprecedented pace...",
"comments": 58
}]
}
Explore practical use cases and ready-to-use examples that show how you can fetch and display data from any API with ease.
Fetch product data from an API and display it as a list inside your page.
{{loop:products}}
<h4>{{title}}</h4>
<p>{{description}}</p>
<strong>${{price}}</strong>
{{/loop:products}}
Use an external API (like a news API) to dynamically display the latest articles.
{{loop:articles}}
<h3>{{title}}</h3>
<p>{{summary}}</p>
<a href="{{url}}" target="_blank">Read More</a>
{{/loop:articles}}
Connect to a sports API and show match results from it.
{{loop:matches}}
<p>{{team1}} vs {{team2}} – Score: {{score}}</p>
{{/loop:matches}}
Display the latest exchange rates using a financial API.
{{loop:rates}}
<p>1 USD = {{value}} {{currency}}</p>
{{/loop:rates}}
Integrate with a movies/events API to display titles and release dates.
{{loop:movies}}
<h4>{{title}} ({{year}})</h4>
<p>{{genre}}</p>
{{/loop:movies}}
Pull customer records, invoices, or order details from your internal CRM/ERP.
{{loop:orders}}
<h4>Order #{{order_no}}</h4>
<p>Customer: {{customer.name}}</p>
{{/loop:orders}}
Note: The widget fetches and displays data when the page loads or is refreshed. It does not auto-update data in real time.
Take full control over how you fetch, filter, and display API data inside Elementor.
Fetch data from APIs using both GET and POST methods.
Securely connect to APIs with custom headers and authentication.
Control how often API data is refreshed on your site.
Map API response fields to display exactly the data you need.
Allows logging error messages or display them directly on frontend.
Show entire API response as raw for debugging purpose.