Integrating IDX into a Webflow site is super easy with Add On IDX. Just follow these steps and you can quickly display all the MLS data, searches, featured listings, map search and more.


Signing up

  1. The first step is to signup for your free account by registering on AddOnIDX.com
  2. Once you're logged in you can now add the website you are building so we can get the IDX paperwork approved by your local MLS.

Adding the website you are working on

When adding your website you need to provide us with the following information:

  1. The URL of the website (can be a temporary Webflow.io url)
  2. The platform you are using (Webflow in this case)
  3. Whether you are building a site for an individual Agent or a Broker (see FAQ)
  4. Choose a Plan
  5. Agent Information (Name, Address, Email, Phone
  6. Broker Information (Brokerage, Broker Name, Email)
  7. The MLS you are wanting to show listings from
  8. You can then review the information, see if the MLS charges any additional pass-through fees and pay via Stripe
  9. We will then send your agent an email with the steps needed in order to get their paperwork approved

Getting the IDX widget code once your IDX has been approved by the MLS

Once the MLS has approved IDX for your account you will receive an email notifying you of the approval

  1. Login to Add On IDX and choose the widgets you would like to embed
  2. Keep in mind some widgets are only available on Premium plans
  3. Let's say you wanted to integrate the Quick Search widget
    1. In the Add On IDX Dashboard, click on Widgets
    2. Choose your site from the Dropdown menu
    3. Click on Quick Search
    4. Choose the Display Style and whether or not you would like to display the property types dropdown
    5. Click the Preview tab to preview the widget
    6. Click back on the Code tab and copy the widget code

Integrating the IDX widget into Webflow

Now that you have copied the widget code, open your Webflow Designer and go to the page where you want to insert this widget

  1. Add an Embed element where you want the widget to appear
  2. Open the Embed element's code editor and paste in the widget code
  3. Save and close the embed element and publish your site
  4. Visit the page you published and you should see the widget
  5. Enter some search parameters and perform a search. You should see the matching listings.

Customizing the Search Results and Property Detail pages in Webflow (creating a template page)

You will notice that when you performed the search the results were displayed on a page without your Webflow site's design. You can easily adjust this by following these instructions:

  1. To create a 'Template' page that can be used for Search Results and Detail pages you just need to create a page in Webflow that has your header, content area and footer. In the Content Area you need to add an HTML Embed element with this code in it: {idx_body}. 
  2. Publish that page and copy it's URL. I usually use idx-template as the page slug. 
  3. Login to the the IDX Control Panel
  4. Go to Setup, then click on Design & Branding, Click the Branding URL radio button and paste in the full URL of your template page.

Now when you perform a search or click on a listing from the search results you will see the IDX information displayed within your Webflow page's designs.