Sometimes the easiest means to integrate a WolfNet IDX solution into a 3rd party web site is through the use of an iFrame. When done properly, the user experience remains relatively seamless while navigating from your web site to the search and back again. Here are some of the basics to make sure your integration is optimal for your customers:
1. Page Width - Minimum width for the property search is about 780 pixels. If your frameset is narrower than that, you will create a side-to-side scroll within the search that many users will find inconvenient. This severely compromises their experience on your site, and could lead to lost traffic.
2. Page Height - Make sure you are setting the height of your frameset to accommodate the longest pages within the search. This will avoid the dreaded double-scroll bar on the right side, which creates a less than desirable user experience. Typically in most MLS markets, the listing detail page is tallest, sometimes exceeding 3,000 pixels. Find a property with a large number of photos and detailed room data, and set the page height in your frameset to exceed that buy at least 500 pixels.
3. Auto-Scroll setup - A consequence of completing the page height requirement as outlined in #2 above is that navigating through the search will maintain the same position on the page vertically as the preceding page. Often users will find themselves navigating directly into the middle of a new page if they were previously in the middle of another page. To avoid this, you will need to add some JavaScript code to your frameset to automatically scroll the user to the top of any new page, which makes for a much more consistent and optimal user experience.
To enable the autoscroll feature, copy the following JavaScript and paste into your iFrame:
<script type="text/javascript">
var intCount = 0;
function scrolltop()
{if(parseInt(intCount) >=1)
{window.location.hash="wolfnet_search";}
intCount = parseInt(intCount) + 1;
}
</script>
<a name="wolfnet_search" id="wolfnet_search"></a><iframe src="http://www.mlsfinder.com/ST_MLS/DIRECTORY/index.cfm" name="main" id="main" width="910″ height="3000″ frameborder="0″ onLoad="scrolltop()"></iframe>
Note the following:
a. "ST_MLS" and "DIRECTORY" are variables in the basic search URL. You have your own unique state abbreviation, MLS abbreviation and site directory. For example, http://www.mlsfinder.com/fl_mfrmls/reikirealty/index.cfm uses the correct state and MLS abbreviations and site directory for the search at www.thumbsuporlando.com.
b. Create an anchor - in this example, you would need to create an anchor named "wolfnet_search"
c. Use the onLoad event in the iFrame tag.
d. Configure the remaining settings as appropriate; this includes height, width, and the URL in the iFrame tag, which can be the search home page, or a custom search string created using the URL Search Builder (A topic for later posts).
4. Logo/Slogan and Return Link Settings - Make sure you are using the correct Logo/Slogan and Return Link settings in your IDX BackOffice. For most iFrame integrations, select "When someone arrives on the site from an email" for both. Many visitors arrive at your search from system emails such as SearchSaver updates, and will not view the search in the iframe. This setting will ensure your search has correct branding and a link to your web site home page. We will go into greater depth on these setting in a later post.
For complete instructions and recommendations on all 3rd party site integration options, please contact WolfNet Technologies directly.
The Tip of the Week blog posts every Friday morning. Each Post is labeled "Easy," "Intermediate," or "Expert" based on the concept being discussed. Original post every Thursday at http://blog.wolfnet.com
Comments(0)