Add iHomefinder IDX to Custom Websites, Wix or Squarespace

Article

If your iHomefinder account is set up with Optima IDX, it provides pages with IDX content hosted by iHomefinder that are ready to use with any custom websites built on platforms like Squarespace or Wix.com. This article will cover the two main methods in integrating Optima IDX with your non-WordPress website: the HTML wrapper integration method and iframe integration method. If you are developing your website using WordPress, please contact your account representative to make sure your iHomefinder account is set up with Optima Express and refer to these Knowledge Base articles instead.

HTML Wrapper Integration Method

The pages that come with Optima IDX can be seamlessly integrated with your website by using the HTML Wrapper method. The steps require some basic understanding of the HTML / CSS used to present the design of your custom website. With the HTML Wrapper method, you or your web developer can:

Add the links to the IDX Pages into your custom website, typically on the primary navigational menu for your custom website.
Use the Control Panel to apply custom HTML/CSS code for your site's header and footer to the IDX Pages (Property Search, Featured Listings, Property Organizer, etc.) hosted on iHomefinder servers. The content on the IDX pages will display in between your custom header and footer.

An optional branding method exists for HTML Transitional compliant layouts. Contact our Support team to enable this option if you are using XHTML Transitional coding, or experience issues with your design rendering properly.

Adding IDX Page Links to your Custom Website

The first step for this method of integration is to add links for the IDX Pages to the appropriate areas of your custom website. A list of all of the page links available for you to use can be found in your iHomefinder Control Panel, under Setup > Account > IDX Page Links.

Typically these links may be added as navigational menu links present throughout the website, or as standard text links throughout appropriate areas of the custom website pages.

Default IDX Page Design

If you actually visit any of the Optima IDX pages, you'll notice that they initially don't provide the same custom design, styling and navigational menu which you have on your own website. You will need to identify and apply the HTML coding from your website to the iHomefinder pages so your custom website design is “wrapped around” the tool.

Looking at your HTML

A key step in configuring your HTML branding involves looking at an existing page from your own website and figuring out where the content from the IDX Pages should be included. For most websites, identifying the different areas in a page layout will be fairly simple. Pages are usually designed with images, links, etc., on the top, sides, and bottom of the page, with the unique content for each page being displayed in a large area in the center of the page. As the user navigates through the different pages on the website, the information in this main content area changes while the other design element often remain the same.

Once you've identified the main content area of the page where you want the iHomefinder IDX content to display, the next step is to look at the HTML for that page and figure out which part of the code corresponds to the that main content area. Usually this will be inside of a main element (<main>), division (<div>), or other HTML element which acts as a main content area container. We will use an example website page and its corresponding HTML to help you identify the different areas in a page layout in the following screenshots.

The screenshot above shows the HTML code that was used to generate the example page in the screenshot below.

As you can see in the example, the main content code highlighted in the HTML code screenshot is responsible for the ‘Welcome to My Website’ heading, and ‘My website content usually goes here’ paragraph.

Identifying the Header and Footer HTML

You will want to use the coding preceding the main content as your HTML header code block, and use the coding after the main content as your HTML footer code block. The example page uses a main element to wrap around the main content which is displayed in the large white area in the middle of the page (beneath the navigational links in the header).

The <main> opening tag directly precedes the content and marks the point where the code can be divided into two parts. In the example, all of the code before and including the opening <main> tag is considered the header.

<!-- BEGIN HEADER HTML-->
  <!DOCTYPE html>
  <html>

    <head>
    <title>Welcome to Real Estate Company</title>
    <meta name="keywords" content="text/html; charset=iso-8859-1">
    <link href="https://www.realestatecompany.com/style.css"" rel="stylesheet" type="text/css">
    </head>

    <body>
      <header>
        <!-- NAVIGATIONAL LINKS AT THE TOP OF THE PAGE -->
        <nav>
          <a href="https://www.realestatecompany.com/">Home</a>;
          <a href="https://www.realestatecompany.com/search-properties">Search Properties</a>
          <a href="https://www.realestatecompany.com/featured-listings">Featured Listings</a>
          <a href="https://www.realestatecompany.com/about">About</a>;
          <a href="https://www.realestatecompany.com/contact">Contact</a>;
        </nav>
      </header>

      <main>
  <!-- END HEADER HTML-->

When looking for the footer code, avoid the content in between the opening <main> tag and closing </main> tag (which in this case is just sample text). In the example, all of the code after and including the closing </main> tag is considered the footer.

<!-- BEGIN FOOTER HTML-->
      </main>

      <footer>
       <p>&copy; 2023 Real Estate Company, All Rights Reserved</p>
      </footer>

    </body>
  </html>
  <!-- END FOOTER HTML-->

Please keep in mind that this is just an example and the actual code on your own site will vary. We recommend to get in touch with your web developer for assistance on identifying code for the header and footer from your site's pages.

Inserting the Header and Footer HTML in the Control Panel

Once you've identified the HTML for your header and footer, navigate to the Branding Setup menu in the iHomefinder Control Panel, located under Setup > Design & Branding > Branding Setup. You can copy and paste the HTML for your header and footer in the corresponding Default Header HTML and Default Footer HTML fields.

You will find some initial default demo code in those two fields when you first open your Optima IDX account which can be deleted.

Absolute vs Relative Links

Remember that the HTML coding you apply to the iHomefinder IDX pages is being served from the iHomefinder servers. Because of this you will need to ensure that the code uses absolute links to CSS stylesheets, images, Javascript files, etc, instead of the relative links which the coding on the custom website may use. Absolute links use the full address for the webpage resource, starting with the https:// and domain name. Relative links do not include the domain name.

Relative Link Example:

<img src=”/images/my-custom-header.jpg” border=”0” width=”800” height=”50” />

Absolute Link Example:

<img src=”https://www.abcrealty.com/images/my-custom-header.jpg” border=”0” width=”800” height=”50” />

Make sure that when applying your header and footer coding to the iHomefinder IDX pages that you update the coding first to reflect the absolute URLs.

Using the Branding URL Option for Externally Hosted Branding HTML

If you wish to use an HTML or HTM file hosted elsewhere on an external web server for your branding, you can select the "Branding URL" option on the Branding Setup menu. If you select that option, a field called "URL" will appear where you will enter the URL for your hosted branding HTML or HTM file.

All of the HTML for your branding will be included in one file and will not have to be split up into separate header and footer HTML as described previously for the "Hosted Branding" option. You will need to write {idx_body} in your HTML file to indicate exactly where you want the IDX content to appear. See the example code below for how your external branding HTML should be written.

<!-- BEGIN HEADER HTML-->
<!DOCTYPE html>
<html>

  <head>
  <title>Welcome to Real Estate Company</title>
  <meta name="keywords" content="text/html; charset=iso-8859-1">
  <link href="https://www.realestatecompany.com/style.css"" rel="stylesheet" type="text/css">
  </head>

  <body>
    <header>
      <!-- NAVIGATIONAL LINKS AT THE TOP OF THE PAGE -->
      <nav>
        <a href="https://www.realestatecompany.com/">Home</a>;
        <a href="https://www.realestatecompany.com/search-properties">Search Properties</a>
        <a href="https://www.realestatecompany.com/featured-listings">Featured Listings</a>
        <a href="https://www.realestatecompany.com/about">About</a>;
        <a href="https://www.realestatecompany.com/contact">Contact</a>;
      </nav>
    </header>

    <main>
      <div>
        {idx_body}
      </div>
    </main>

    <footer>
     <p>&copy; 2023 Real Estate Company, All Rights Reserved</p>
    </footer>

  </body>
</html>
<!-- END FOOTER HTML-->

NOTE: All links, scripts, and images must have absolute URLs (e.g. http://www.yourdomain.com/images/banner.jpg).

XHTML Transitional Wrapper

If you are using a XHTML Transitional coding, make sure you contact your account manager to have the ‘Use XHTML (Transitional only) validation on client site’ option
enabled for the account. This will make it possible to apply the coding to the pages with the ‘HEAD’ section of the HTML template applied separate of the ‘BODY’ content (which is split into a HEADER and FOOTER wrapper set). This is necessary if your layout does not render on the iHomefinder pages the same way it does on your custom website pages.

Iframe Integration Method

Another way to integrate Optima IDX into your website is through the use of iframes. With this method, IDX pages can be embedded directly onto pages within your site without the need for wrapping them with HTML. Please contact our Support Team if you elect to use iframes on your site and ask us to turn on a setting called "Site Uses Frame Sets" for your account.

Embedding Pages into Your Custom Website

You may prefer to use iframes to integrate the iHomefinder IDX pages with your custom website to mask the iHomefinder page URLs, or if the website uses
a content management system (CMS) with dynamic navigational menus or sidebar items.

Typically, you or your web developer will embed the iHomefinder pages into the website using iframe code, such as in the example snippet below:

<iframe src="https://www.idxhome.com/homesearch/123456/"" width="970" height="1730" frameborder="0" allowtransparency="true">
<p>Your browser does not support iframes.</p>
</iframe>

A list of all of the page links available for you to use can be found in your iHomefinder Control Panel, under Setup > Account > IDX Page Links.

Due to the dynamic nature of the iHomefinder pages you may find that the content which loads into the page exceeds the width or height of the iframe you are using to contain the page, resulting in a scrollbar on the right side of the iframe. It is recommended to increase the width and height of the iframe to avoid this behavior.

Adding HTML to Framing Setup

You will need to provide some HTML branding to wrap the IDX pages which cannot be placed within frames on your site. Examples include listing detail pages reached from email update click-throughs, and listing results reached from a quick search widget. (NOTE: you do not need to do this if you use the HTML wrapping integration method.)

To add HTML to wrap these pages, navigate to Setup > Design & Branding > Framing Setup in your iHomefinder Control Panel. This page includes a text area where you should enter the HTML code for an entire webpage from your website.

This HTML should be very similar to code that you use on one of your website pages that frame in IDX content. In between the header and footer HTML where you would designate the main content of the page, include an iframe tag. The src parameter of this iframe tag should use 'FrameIncludeHere' instead of a URL. The 'FrameIncludeHere' string will be replaced with the actual URL of the IDX page requested in an email click-through or quick search submission.

Using the example described in the "HTML Wrapping Integration Method" section of this article, the code would be set up like this for Framing Setup:

<!-- BEGIN HEADER HTML-->
<!DOCTYPE html>
<html>

  <head>
  <title>Welcome to Real Estate Company</title>
  <meta name="keywords" content="text/html; charset=iso-8859-1">
  <link href="https://www.realestatecompany.com/style.css"" rel="stylesheet" type="text/css">
  </head>

  <body>
    <header>
      <!-- NAVIGATIONAL LINKS AT THE TOP OF THE PAGE -->
      <nav>
        <a href="https://www.realestatecompany.com/">Home</a>;
        <a href="https://www.realestatecompany.com/search-properties">Search Properties</a>
        <a href="https://www.realestatecompany.com/featured-listings">Featured Listings</a>
        <a href="https://www.realestatecompany.com/about">About</a>;
        <a href="https://www.realestatecompany.com/contact">Contact</a>;
      </nav>
    </header>

    <main>
<!-- END HEADER HTML-->

<!-- IFRAME CODE GOES HERE-->
<iframe src="FrameIncludeHere" width="970" height="1750" frameborder="0" allowtransparency="true">

<!-- BEGIN FOOTER HTML-->
    </main>

    <footer>
     <p>&copy; 2023 Real Estate Company, All Rights Reserved</p>
    </footer>

  </body>
</html>
<!-- END FOOTER HTML-->

Quick Search and Featured Listings Slideshow

If you are using the Quick Search or the Featured Listings Slideshow, branding will not be applied to the resulting page by default.

For the HTML template to be applied to the pages these options link to, make sure you include the ‘&ShowFramed=1′ parameter in the Javascript block inserted into your website.

JavaScript Conflicts

The iHomefinder IDX pages rely on the Bootstrap 3 Javascript library to provide various functions such as the display of pop-up lead capture forms, or loading content into the
page dynamically after a button or link has been clicked on. Please visit https://getbootstrap.com/docs/3.4/javascript/ for more information about the Bootstrap 3 JavaScript library.

If the HTML in your Branding Setup or Framing Setup includes JavaScript which conflicts with Bootstrap, your search form may return text on the screen instead of loading the information into the search results index on the page, or certain buttons such as the ‘Request More Info’ or ‘Schedule a Showing’ buttons shown on the listing detail pages, may not work properly.

To avoid this we recommend that you remove any Javascript from the branding which is not essential to the design being applied to our pages.

Sometimes the drop-down menus, or other design elements, require Javascript which conflicts with Bootstrap. Commonly this occurs with HTML branding which requires the
jQuery Javascript library. This conflict can usually be resolved by calling the ‘noConflict()’ method and then referring to the jQuery object directly as jQuery() instead of $(). See the example below:

<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript”>
jQuery.noConflict();
jQuery(document).ready(function () {
alert(‘The DOM is ready’);
});
</script>

More information about the ‘noConflict()’ method is available via the jQuery website at: http://api.jquery.com/jQuery.noConflict

Other Integration Options

Optima IDX Widgets

This area lets you choose which widgets are shown on the sidebar of the IDX pages. All that is necessary is that you select the page you’re wanting to configure, and then drag and-drop the widgets you wish to use under the ‘Selected Widgets’ section from the ‘Available Widgets’ section.

You can also click on the down arrow for a widget and modify the settings for each widget.

CSS

Cascading Style Sheets (CSS) are used by iHomefinder pages to control the way the elements on the IDX pages are displayed. If you need to override these styles to
accomplish a look/feel for the iHomefinder pages so that they match your design better, you can apply the coding inside of the CSS tab under the Design/Branding Setup area.

On the left hand side of the CSS page is a list of CSS coding used by the iHomefinder pages. You can use this as a reference if needed. For instance a designer wishing to
change the color of the text links used on the pages could search for all styles which apply to text link colors, and then copy the coding, paste into the ‘Style Override’ field, and modify
the color code as needed.

Sub-Headers

The Sub-Header is text or design elements displayed between the regular Header and the iHomefinder tools. A default header is used on each page. In the screen shot below the
default header is shown for the Property Search page

Email Branding

Email messages are sent to the website visitors in the form of notifications and email updates (received on a daily basis). A design similar to the custom website, as well as
other important information, may be applied to each email sent by the iHomefinder system.

This is a key piece of branding since it helps solidify the association between the email update service and the Agent or Broker who is providing the service. This design/branding
configuration is separate from the configuration of other page wrappers since the design elements that you want to include in an email will usually differ from the more extensive
design information included on the pages of the clients website. Also keep in mind that email programs do not support the same HTML standards which typical web browsers
support.

To configure email branding, go to Account Setup > Email Routing/Branding > Email Branding (tab).

This section allows you to apply text and/or HTML branding to all email messages globally. To apply a specific design to a specific email message, select
the Email Customization tab at the top of the page.

HTML Validation Issues

The Internet Explorer web browser is very sensitive to invalid HTML, as are the other web
browsers. Sometimes Javascript functionality fails to work properly due to invalid or
deprecated tags and attributes, overlapping tags, or even tags with empty attribute values.

To ensure that your HTML/CSS/Javascript coding isn’t doing something that
would cause strange behavior from the web browsers, we recommend that you use a validation service, such as the one available at the following URL:
http://validator.w3.org/

Category iHomefinder Tutorials Tags how to idx ihomefinder optima express tutorials wordpress