Add Listing Widgets to Webflow
Show live MLS listings on any Webflow page with a listing grid or a carousel. The cards update on their own.
On this page
In short
- Listing widgets go into the same Code Embed element.
- Grid and carousel layouts both work on Webflow.
- Filters decide which listings each widget shows.
- Cards update on their own, nothing to sync.
This guide covers one task from IDX Plugin for Webflow: putting live listing cards on a Webflow page. What the cards can do, lead capture, filtering and layout options, is covered in Listing Showcase and Listing Carousel. Here you get the Webflow-specific part.
This is the grid layout running live. Webflow shows a gray placeholder in the Designer, and your published page shows cards like these.
Add the widget to your page
-
1
Choose a widget
In the Widgets section of your dashboard you will find pre-built demos: Featured Listings List (a clean grid), Featured Listings Carousel (rotating listings with arrows) and Most Expensive MLS Listings. Choose the layout that fits your design and click Edit.
-
2
Configure which listings it displays
Use the filtering tools to target properties by location, price range, property type or bedroom and bath count. Adjust columns, spacing between cards, image ratio and label styles.
-
3
Get the embed code
Click Public Preview to see the widget with live data, then Show Embed Code and copy the snippet.
-
4
Add a Code Embed on your page
Go to the page where you want the listings, such as the homepage or a neighborhood page, and insert a Code Embed element.
-
5
Paste and publish
Paste the code into the element, save and publish your Webflow site. The cards are fully responsive and always current with your IDX Broker feed. Repeat for additional widgets covering specific areas or price ranges.
One widget per page idea
A widget can go on any Webflow page, not just the homepage. Community pages, a luxury page, a page for one price bracket, each gets its own widget with its own filters, and each updates itself when the MLS changes.
For a section that has to stay short, the carousel keeps a fixed height. It is live below.
Already on IDX Broker? Try the cards on your MLS.
Create a free IDX Plugin account, add your API key, and the styled widgets are ready in your dashboard, filled with your own listings. Open a preview and see how the cards will look before you place anything in Webflow.
See it on your own listings → No extra invoice. You only pay IDX Broker.