Add Listing Widgets to Webflow
The Webflow-side steps for placing live listing cards on any page, whether the homepage or a neighborhood page.
Written by IDX Plugin, an independent IDX Broker Developer Partner, not affiliated with IDX Broker.
On this page
In short
- Your listings render as cards on your published Webflow site.
- The Designer shows a placeholder; the live page shows cards.
- Pick a grid for a full section or a carousel to stay short.
- A paid Webflow plan is required.
Putting live listing cards on a Webflow page is one task from IDX Plugin for Webflow. 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 a set of ready widgets, running on the data from your IDX Broker account. The listing grid and the listing carousel are separate widgets, so open the one 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 Show Embed Code on the widget 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 responsive and stay 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 from your IDX Broker account.
For a section that has to stay short, the carousel widget keeps a fixed height. It is live below.
Already on IDX Broker? Try the cards on your own listings.
Create a free IDX Plugin account, add your IDX Broker 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.