Website Integration Guide

1. Overview
2. HTML Wrapper Integration Method
   1. Headers and Footers
3. Frameset Integration Method (iframes)
4. Other Integration Options
5. CSS
6. Email Branding
7. Common Issues
   1. JavaScript conflicts
   2. HTML Validation Issues

Below is an outline of the website integration process.

• A new client account is created by an iHomefinder account manager, or by an iHomefinder partner using the Partner Portal interface.

• Account is set with our most current application version, called “Optima”. This setting is found in the account Control Panel under Account Setup –> General Settings.

NOTE: We do not recommend using the older “6.0″ or “7.0″ options as these are no longer being updated and could present incompatibilities with modern web browsers. If it is not already selected, be sure you select “Optima” as the application version in order to enable our latest features and to ensure compatibility with modern web browsers.

• Three page widths are available to choose from: 550, 750, or 950 pixels. When using the 950 pixel page size, the pages will also include sidebar widgets. The page size setting can be found in the account Control Panel, under Account Setup –> Design/Branding Setup –> Templates (tab). If you are an iHomefinder reseller, you will find this setting in your Partner Portal under the Account Setup –> Client Options (tab).

• The system provides custom links for the client which lead to pages with the iHomefinder tools. These links lead to fully functional iHomefinder pages, which are hosted on iHomefinder web servers. At this point these pages have no other design information.

• Below is an example of link provided by the system

• The iHomefinder pages are integrated into the client’s website using one of two methods:

◦ HTML Wrapper Integration Method

▪ Website developer adds links to the pages into the custom website, typically via primary navigational menu for custom website.

▪ Website developer uses the Control Panel to apply HTML/CSS code to the iHomefinder pages (Property Search, Featured Listings, Property Organizer,
etc.). Code is provided in the form of “header” and “footer” code blocks which the iHomefinder page content is inserted between on the pages provided by
the iHomefinder servers.

▪ An optional branding method exists for HTML Transitional compliant layouts. Contact support to enable this option if you are using XHTML Transitional
coding, or experience issues with your design rendering properly in Internet Explorer or other web browsers.

◦ Frameset Integration Method

▪ Website developer directly embeds iHomefinder pages into custom website using framesets or iframe tags.

▪ Website developer creates a ‘Frame Set Code’ template which is used to apply the same design to iHF pages when direct page linking is necessary
(i.e. listing links provided in email updates, Quick Search form widget, listing slideshow widget links, etc).

• Website developer optionally applies HTML header and footer for use with email messages sent to the clients contacts from the iHomefinder account.

The iHomefinder tools can be seamlessly integrated with the custom website by using the HTML Wrapper method, however. The steps required to do this are simple, but do require
some basic understanding of the HTML / CSS coding used to present the design of the custom website.

The first step for this method of integration is to add links for the iHomefinder pages to the appropriate areas of the custom website. These can be located from the link on the
homepage of the IDX Control Panel.

Typically these links may be added as navigational menu links (usually at the top of left side of every page throughout the website), or as standard text links throughout
appropriate areas of the custom website pages.

After linking to the iHomefinder pages from the custom website you will likely notice that the links take the user to the iHomefinder pages which do not provide the same custom
design and navigational menu which you have applied to the website.

To resolve this you will need to apply HTML coding to the iHomefinder pages, so that the the custom website design is “wrapped around” the tool.

The iHomefinder pages run on the iHomefinder servers, so to achieve this integration you need to copy and paste HTML/CSS code into an area of the iHomefinder IDX Control
Panel. This coding is then applied above (header) and below (footer) the coding responsible for the tools provided by iHomefinder on each page.

A key step in configuring your HTML branding involves looking at an existing page for the website and figuring out where the iHomefinder content should be included. For most
pages, this 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 pages on the website, the information in this main content area changes while the other design element
often remain the same.

Once you decide or locate the main content area of the page where you want the iHomefinder tools 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 area where you want the iHomefinder content to be located. Usually this will be inside of a table cell (TD), division (DIV), or other
HTML element which acts as a main content area container.

Once you identify the area of the page which contains the coding for the main content area, you will want to use the coding above the main content as your HTML header code
block, and use the content below the main content coding as your HTML footer code block.

The code above shows the HTML that was used to generated this example page below. As you can see, the main content code highlighted above is responsible for the ‘Welcome to
My Website’ heading, and ‘My website content usually goes here’ paragraph.

This page uses a division (DIV) tag to wrap around the main content which is displayed in the large white area in the middle of the page (beneath the navigational links). The <div
id=”content”> tag directly precedes the content (in this case, just text) and marks the point where the code can be divided into two parts. Everything above and including the <div
id=”content”> code is considered the header.

This example includes sample text in the content area, which you wouldn’t want included on each page of the website. So, when looking for the footer code, the actual text should
not be copied, however everything else below that content should be. Everything below and including the </div> is considered the footer.

Remember that the HTML coding you apply to the iHomefinder 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 http:// 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=”http://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 pages, that you update the coding first to reflect the absolute URL’s.

Once you locate the “break” in the page where the content area begins and ends, you can copy and paste the HTML header and HTML footer code into the iHomefinder Control
Panel.

This area is located under the Account Setup menu inside of the Design/Branding Setup area.

From this section select the Global tab. This section will allow you to apply the HTML branding which is applied to all the iHomefinder pages globally.

iHomefinder provides multiple way to configure the header and footer information for the pages of a site. Design/branding options include:

• Global Default – if all pages will use the same wrapper design, this is the only place where HTML coding will need to be applied. If some pages willl be customized, but most will use a common design, enter the most commonly used design here and customize specific pages as needed. This can be thought of as the “default’ design.

• Group Defaults – This section groups pages based on their function (e.g. Property Search, Email Updates, Featured Properties, Offices and Agents, etc.), and allows you to apply an alternative wrapper to a specific group. A group level wrapper will over-ride the global default which was applied to all pages.

• Page Specific – This section allows you to apply an HTML wrapper to a specific page which over-rides any global or group specific branding applied via the previous two tabs.

The ‘Template Selector’ tag provides you with global template settings. Accounts using the ’7.0′ Application Setting under Account Setup > General Settings will allow for the choice of
’550 pixels wide’ or ’950 pixels wide’ with a disclaimer regarding the Interactive Map Search page. Those using the iSearch Optima pages will need branding that supports a content
area that is 720 pixels wide or more.

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.

The client may prefer to use standard framesets or iframes to integrate the iHomefinder pages with the custom website to mask the iHomefinder page URL’s, or if the website uses
a content management system (CMS) with dynamic navigational menus or sidebar items

Typically a designer will embed the iHomefinder pages into the website using iframe code such as below:

<iframe src=”http://abcrealty.idxre.com/homesearch/50298/”
width=”970″ height=”1730″ frameborder=”0″ allowtransparency=”true”>
<p>Your browser does not support iframes.</p>
</iframe>

Page URLs can be found by using the ‘Click here for the links’ option on the home page of the IDX Control Panel.

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.

One step that must be taken at some point is to contact iHomefinder, and request to have your account updated to reflect that you’re using the iframe integration method. If you are an iHomefinder IDX provider, this option will be available under ‘Client Options’ in your Partner Portal interface.

With this option enabled, the IDX system will make sure the custom HTML template you provide for non-iframed pages is applied to directly linked pages, such as in the email updates sent to your subscribers by the IDX system.

An HTML template is still necessary even with websites which are using iframes to integrate the webpages with the website. This is necessary for iHomefinder pages which
are accessed directly via Email Update links (for Property Detail pages), Quick Search result pages, Featured listings slideshow links, etc).

A frameset code template will contain HTML coding much like that of a page on the custom website which is embedding an iHomefinder page via an iframe or frameset, however the
webpage URL which is inserted into the source (src) parameter of the frameset or iframe must be replaced with ‘FrameIncludeHere’ (this is case sensitive, so ‘frameincludehere’
will not work).

<iframe src=”FrameIncludeHere” width=”970″ height=”1730″
frameborder=”0″ allowtransparency=”true”>
<p>Your browser does not support iframes.</p>
</iframe>

This template must include absolute URL’s for the other resources responsible for the design/layout such as images, stylesheets, and Javascript libraries (see Absolute vs
Relative links section above).

To apply the frameset code template go into the IDX Control Panel and navigate to the Design/Branding Setup section under the Account Setup menu.

Next select the ‘Page Specific’ tab at the top of the page.

Scroll to the bottom on the page and select the ‘Frame Set Code’ link from beneath the Additional Features link on the left-hand side.

Inside of the ‘Frame Set Code HTML’ textarea field, you can paste the HTML code for an entire webpage which includes an iframe tag, much like the ones you have embedded on your own custom website.

For the src (source) parameter of the iframe tag however you will use FrameIncludeHere instead of the actual URL for the IDX page. The iHomefinder IDX system will replace this string of text with the actual URL of the page which is being dynamically loaded into the template.

To test the frameset code you’ve applied for directly linked page, simply visit the URL for one of your IDX pages directly.

For instance, if you go to the IDX search page link for our demo account at http://ihomefinder.idxre.com/idx/searchMap.cfm?cid=41647, you will see that the page loads without the template applied.

Next add the parameter ‘&fe=1′ to the URL for your IDX page.

For our example, if you go to the same page address with the parameter added – http://ihomefinder.idxre.com/idx/searchMap.cfm?cid=41647&fe=1, you will see that the page loads with the template applied.

If you have decided to embed the iHomefinder IDX pages into your website using iframes, you will not want to apply HTML branding to our IDX pages via the Client Administration area under Account Setup -> Design/Branding Setup -> Global Default (tab).

Instead you will embed our IDX pages into your custom webpages which already include your website logo, navigational links, and other content.

You may use our IFrame Code Generator tool to generate blocks of HTML code which can be used to embed our forms into your custom website pages.

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.

The custom website may have a main content area which is very wide, or very narrow, depending on the space used by columns/sidebars presented on the web pages. To
accommodate this the 7.0 iHomefinder pages can be configured to use a 550 pixel or 950 pixel wide template.

This section of the Control Panel currently provides several color options for iSearch Optima pages, available for HTML branding that has 720 pixels or 950 pixels of width in
the main content area.

Once a 950 pixel template option has been chosen for an account using the Optima interface, a new Widget tab will be made available

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 dragand-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.

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 over-ride 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.

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 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.

Several widgets are available which can be placed on the custom website. These are available from the Knowledge Base support page under the category Adding Widgets to Optima IDX Pages:

http://www.ihomefinder.com/support/knowledge-base/

The iHomefinder IDX pages rely on the Prototype 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.

http://www.prototypejs.org/

If your HTML branding includes Javascript which conflicts with Prototype, your search form may return a bunch of 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 Prototype. Commonly this occurs with HTML branding which requires the
jQuery Javascript library. This conflict can be resolved by using the ‘noConflict’ function and then referring to the jQuery object directly as jQuery() instead of $().

Example:
<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 is available via the jQuery website at:

http://api.jquery.com/jQuery.noConflict

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.

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

http://validator.w3.org/