904.549.7600

How to Add a Home Search to Your Website

by Nov 27, 2019

Update (7/14/2020): A new WordPress plugin was just released that makes adding an MLS home search easier than ever and gives you helpful features such as search results pop-ups that keep users on your site. Learn more at https://about.homeasap.com/wordpress/idx-mls-check

Today’s consumers expect to find an MLS search on any real estate agent’s website. So if you don’t have an IDX Home Search, you’re already falling behind the competition and losing leads. Luckily, adding an MLS search doesn’t have to be that difficult or expensive. Today, we’ll look at how you can add a home search to your website.

Jump to a Section

Before We Get Started

To add an MLS search to your website, you’ll need to purchase a service that allows you to connect to your MLS and gives you a landing page to perform searches. Obviously, we recommend our own IDX Home Search because it looks great and our MLS data feed is constantly updated.

finished page after adding MLS Home Search to website

IDX Home Search creates a landing page that lets users search the MLS for homes.

Besides an IDX landing page, you’ll also need a way to add the needed code to your website. For this article, we’ll be using WordPress to add the needed code snippet, but you can also make this work with other popular site builders like Wix and Weebly by using their “embed code” widgets. The process for these web builders should be similar to what you do on WordPress.

Maybe the word code gives you anxiety, but don’t worry. If you can copy and paste, then you can handle adding your home search to a website.

Add a Home Search Page to your WordPress site

Click “Pages” to add a new page from the WordPress Dashboard.

Step 1: Create a Page For Your Home Search

Before you can install your home search, you need to page that will house your home search. To create a new page, go to your WordPress dashboard. You can get there by typing the main URL of your website followed by “/wp-admin/”, and then enter your username and password. Hover your mouse cursor over “New” and select “Page.”

A new screen should appear where you can edit your new page. Give your page a title that will make it easy for visitors to know exactly what they can do from this page. For our example, we’ll call this page “Home Search.”

Step 2: Create an iframe

Next, we need to create a container that will hold your IDX Home Search landing page. Web developers call this container an iframe. The iframe creates a window on your webpage that can load the landing page without users having to leave your site. Think of it as a webpage within a webpage.

Add an HTML Block

To add an iframe, you’ll need to add an HTML block to the page. This may look different depending on the WordPress theme you’re using, but virtually all themes should have this block. In the default editor, hover your mouse over the area where you would type your content. You should see a small plus sign appear. Click it, and type “Custom HTML” into the search box that appears.

Wordpress Custom HTML block

The latest WordPress editor includes custom HTML blocks.

Insert an iframe

To add the iframe that will hold your home search landing page type the following code into the Custom HTML you just added.

 <iframe src="YOUR LANDING PAGE URL HERE" style="width: 100vw; height:100vh; position: fixed; top: 0; left:0; z-index: 500;"></iframe> 

You may notice that the code contains two statements with equal signs. This is where we can set attributes for our iframe element. The “src” attribute refers to the source of the content we’re going to load in the iframe. The “style” attribute lets us control how the iframe will look on the page.

Link Your Home Search to the iframe

To add an MLS search to your page, you’ll need the link to your IDX Home Search landing page. For our example, we’ll use the Home ASAP demo page at https://homeasap.com/JenniferAndersonTeam. Copy the URL of the landing page by selecting its web address in your browser. Then right-click and choose “Copy.”

Now go back to the WordPress editor. Then paste the IDX Home Page URL in after the “src” attribute. Be sure to include the equal sign and a quotation mark before and after the URL. Your Custom HTML block should look like this when you’re finished:

 <iframe src="https://homeasap.com/JenniferAndersonTeam" style="width: 100vw; height:100vh; position: fixed; top: 0; left:0; z-index: 500;"></iframe>
Adding MLS Home Search to Wix site

Most web page builders, including Wix, have widgets that allow you to add HTML to your page.

Step 3: Make Adjustments If Needed

If you have followed the instructions so far, you should see be able to see your home search appear when you click the “Preview” button. However, you may notice that some important elements like your navigation menu have disappeared or you may see items from the bottom of the page have floated into the middle of the page. Do not panic! This can usually be fixed.

changing page template

Many themes include full-page templates with no sidebars.

If a Sidebar Appears Over the Page

If you see an unwanted search box and page links appear, you may need to turn off sidebars on the page. How you do this will depend on your theme. For many themes, you can change the page template to full-width, and this will remove sidebars. Other themes such as Divi, have an option to include no sidebars under the “Page Settings” menu. These options, if available, should appear on the right side of your page editor.

unwanted search appearing over IDX Home Search page

Depending on your theme settings, unwanted elements can appear.

If Other Elements Appear or Disappear

For some themes, important elements like the site navigation may seem to disappear after adding your home search. You can usually make them reappear by changing the z-index property. Find the section of the snippet that says “z-index: 500.” Try lowering the number until that element reappears. For instance, try using “z-index: 400;”, and see if the hidden element reappears.

On the other hand, you may have links and images that block your MLS landing page. In this case, you can bring the iframe to the “front” by making the z-index larger. For example, you may need to change it to “z-index: 550;”. Getting it just right will require some trial and error, but usually, these adjustments will usually solve the problem.

top property

The top property moves the iframe down.

Moving Your Home Search Up or Down

You can also move the iframe that holds your home search landing page if needed. For this adjustment, you’ll need to change the value of the top property. By default, we have set the iframe to be 0 pixels from the top. You can move your home search down by making this number bigger. For instance, top: 300px; will move the home search section 300px down from the top.

When changing this property, be sure to include no spaces between the number and px. Also, be sure to put a semi-colon (;) directly after the ex and to use lower case letters.

Step 4: Publish the Home Search to Your Website

Once you’re satisfied with how your IDX Home Search appears, you’re ready to publish to your live website. Simply click the “Publish” button near the top right corner of your screen, and you’re done.

To get the most out of your home search, you’ll also want to add the page to your navigation menu so that it’s easy to access. You should also add call-to-action buttons around your site to encourage your site visitors to use your home search. In fact, we recommend adding a call to action as one of the first things people see on your home page.

Start Driving New Buyer Leads

Now that you have successfully added an MLS home search to your website you can turn your focus to driving new buyer leads. After all, your prospects can’t use your home search unless they know it’s there!

So get out there and start sharing! Send e-mails announcing your IDX Home Search to past clients. Advertise your home search on Facebook and Instagram. Include the web address on business cards and other collateral. The more you promote your IDX Home Search the more you return you’ll see.

Popular Articles

Facebook Cover Photo Templates – November 2020

Facebook Cover Photo Templates – November 2020

Give your Facebook profile an easy makeover with these all-new customizable Facebook cover image templates available exclusively to Pro members of the Real Estate Agent Directory. Already a Pro Member? Sign in for access.Give your Facebook profile an easy makeover...

Facebook Posts Calendar For Real Estate For Nov. 2020

Facebook Posts Calendar For Real Estate For Nov. 2020

Unsure of what to post to Facebook? We've got you covered. Our Facebook Posting Calendar for Real Estate Agents gives you posts ideas and hashtags for each day of the month. Already a Pro Member? Sign in for access.Your Facebook posts calendar also includes a posting...

Home Sales Horror Stories Halloween Giveaway

Home Sales Horror Stories Halloween Giveaway

Have you ever had a showing go terribly wrong? A client from hell? A listing with dark secrets? We want to hear about it! Use the entry form below to submit your Home Sales Horror Stories for a chance to win a free seasonal Facebook Page makeover and video cover...

Creating and Optimizing a Facebook Page for a Real Estate Agent

Creating and Optimizing a Facebook Page for a Real Estate Agent

A well-crafted Facebook page makes a huge difference in a competitive marketplace like real estate. But what exactly separates an effective page from the others? Details. In this article, we'll share the crucial details you should consider to create a successful...

turnkey suite

Schedule an IDX Home Search Demo

Speak with a specialist to see how you can get your own IDX Home Search. Just choose a date below to get started.


Get $200 In Home ASAP Products

Meet the Author

Jonathan earned his Masters in Mass Communications from the University of Florida. He specializes in online communications and web design. When he’s not developing marketing strategies, he enjoys hiking and playing the guitar.

Related Articles