Show IDX Pages with Your Webflow Navigation and Footer
A dynamic wrapper puts your Webflow navigation and footer around every IDX Broker page, and our templates take care of the layout inside.
On this page
In short
- IDX pages come from your IDX Broker account.
- A wrapper page gives them your Webflow nav and footer.
- Two small tags mark where the content goes.
- Our templates handle the layout between them.
What the wrapper does
IDX Broker generates listing detail pages, search results and tools like Schedule a Showing or Home Valuation as standalone pages. By default they do not use your Webflow navigation or footer. A dynamic wrapper is a page on your site that tells IDX Broker where to place its content inside your own layout, so everything stays visually consistent. It is the third piece of IDX Plugin for Webflow, after the search form and the listing widgets.
Build the wrapper page
-
1
Create a wrapper page
Create a new static page in Webflow, name it something like IDX Wrapper and set a clean URL slug such as idx-wrapper.
-
2
Start from the blank page
Webflow generates a new blank page for you.
-
3
Add your navigation and footer
On the new page, add your existing navigation at the top and your footer at the bottom to keep the layout aligned with the rest of your site.
-
4
Insert a Code Embed
Between the navbar and footer, insert a Code Embed element. This is where IDX Broker injects its dynamic content.
-
5
Paste the wrapper tags
Paste the code shown below exactly as written. It tells IDX Broker where to insert its content.
-
6
Publish and copy the URL
Publish the page and copy the full public URL, for example https://your-site.webflow.io/idx-wrapper.
-
7
Set the wrapper in IDX Broker
Log in to IDX Broker, go to Design then Website then Wrappers then Global, paste your wrapper URL into the Dynamic URL field and click Save Changes.
<div id="idx-start"></div><div id="idx-stop"></div>Once saved, IDX Broker displays all IDX pages, including listings, search results and lead tools, inside your Webflow layout with full use of your site's navigation and footer.
Next, put your own layout on the IDX pages
The wrapper solved the frame. What lives between your navigation and footer is still the layout IDX Broker uses by default, and that is where our templates come in: they are published into your IDX Broker account and you select them page by page, a few minutes and no code. Which template goes with which page is covered in How Our IDX Broker Templates Work, and Global Styles then matches everything to your Webflow branding. You can see the results page running live on our demo.
Want us to set the wrapper up with you?
Create a free IDX Plugin account and write to us. Most of the work happens on our side, in the dashboard and on the IDX Broker pages, and for the Webflow part we arrange it in whatever way suits you.
Get Started, it's free → No extra invoice. You only pay IDX Broker.