Integrating Duda Website Builder with IDX Broker

Duda allows agencies to create modern, SEO-friendly real estate websites. While Duda uses adaptive design and IDX Broker uses responsive design, they can be integrated using the methods below to ensure content displays correctly across all devices.

Prerequisites for Integration

Before starting any integration method, ensure the following steps are completed:

• Custom Subdomain: Create a custom subdomain and add it to your IDX account to ensure pages are indexable for SEO.

   

• Enable HTTPS/SSL: In your IDX Broker account, navigate to Account > Details and turn on Enable HTTPS and Redirect.

   

• Dynamic Wrapper Setup: In the IDX control panel, go to Design > Website > Wrappers to create a dynamic wrapper that matches your site design.

   

   

Method A: Modified Desktop Expandable Menu (Recommended)

This is the easiest and fastest method to implement. It uses a modified desktop menu to handle the IDX mobile view.

Step 1: Create the IDX Template

1. Create a new page on your Duda site titled "IDX Template".

    

2. Do not add this page to your navigation menu.

    

3. Add a text block widget to the page (this will be replaced by IDX content).

    

4. Use a web inspector to find the Block ID for this widget.

    

Step 2: Save the Dynamic URL

1. Replace the id and site URL in the developer link with your specific Block ID and site URL.

    

2. In the IDX control panel, go to Design > Website > Wrappers and select Dynamic.

    

3. Paste your generated URL into the Dynamic URL field and save.

    

Step 3: Format Header and Footer for Mobile

• Enable Layouts: In Duda, go to Design > Site Layout and enable the Expandable Menu for both Desktop and Tablet.

   

• Add CSS: Use the Developer Options to add media queries to site-desktop.css and site-tablet.css to hide standard navigation and show the hamburger icon on mobile view.

   

• Footer Responsiveness: Update the footer CSS to change flex-direction to column and set column widths to 100% for mobile devices.

   

Method B: IDX Broker Mobile Wrapper

Use this method if you prefer to build a custom mobile header and footer from scratch using HTML and CSS.

1. Enable Mobile Wrappers: In IDX Broker, go to Design > Settings > Global > Mobile and turn on Use Mobile Wrappers.

    

2. Add Custom Code: Insert your custom HTML for the mobile header and footer into the Sub-Headers > Mobile tab.

    

3. Apply CSS: Add the corresponding styling to the Custom CSS > Mobile tab.

    

4. Hide Defaults: Use CSS to hide the default IDX mobile header (.IDX-mobile-header) and footer (.IDX-mobile-footer).

    

Method C: Integrating via Iframes

You can load IDX pages using an <iframe> tag if a wrapper cannot be created.

• Code Example: <iframe width="100%" height="100%" src="[Your IDX URL]"></iframe>.

   

• Warning: Iframes have fixed heights which may cause scrolling issues.

   

• SEO Note: Search engines typically do not index content displayed via iframes.

   

   

Method D: Duda Custom Widget

For advanced users, Duda’s flexible widget builder allows for API-based integration.

• Example: The "IDX Search" widget by Duda partner TheCamel.co offers a more integrated feel without manual coding.

   

 

Protip: Every time you change your site's header or footer, you must click Clear Wrapper Cache in the IDX control panel to see the changes on your IDX pages.