904.549.7600

How to Add a Home Search to Your Website

by Nov 27, 2019

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

The Top Real Estate Agent Facebook Pages of 2019

The Top Real Estate Agent Facebook Pages of 2019

Most agents know they need a Facebook business page, but even tech-savvy agents struggle to figure out what to include on their page. Our Page Create designers see hundreds of real estate agent Facebook pages every year as they create and remodel pages, so we asked...

Can’t Miss Black Friday Deals for Real Estate Agents

Can’t Miss Black Friday Deals for Real Estate Agents

Doesn’t it seem like once November hits, we put off our purchases until Black Friday? In fact, we’ve already started receiving emails and ads from retailers about what they’ll be offering this year. For many, this might seem annoyingly early, but it can be the perfect...

Why Should Agents Worry About Real Estate Branding?

Why Should Agents Worry About Real Estate Branding?

For many agents, just finding new leads seems like a full-time job in itself. Then when you get a lead, you have to carve out time for a showing or listing presentation - not to mention closings, open houses, phone calls, and everything else. You may think you don’t...

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

Get Marketing Insights and Advice

Learn how you can improve your marketing with tips and tricks from the experts in Facebook marketing for real estate. You'll get weekly articles, helpful tools, and more for FREE, so you can grow your skills and sell more homes.

Thanks for signing up. Keep an eye on your inbox for a special gift from Home ASAP Marketing Advice.