Add Rental Listings to Your Custom Website | iFrame

Important Note: The following article discusses advanced programming features for your property management website. This article was written to provide guidance to your webmaster or website designer. Rentec Direct is unable to provide support for advanced website programming for a website created outside the Rentec Direct system. If you have questions, please consult your webmaster or website designer.

Adding Rental Listings to Your Custom Property Management Website

While Rentec Direct provides a free property management website to clients, another option is to create your own website with the help of a web designer or another website builder service.

If you choose to hire a web designer to create a custom website outside Rentec Direct's included features, you have additional customization options. From these clients, we have seen some truly awesome, beautifully designed websites for their property management businesses.

One key component of creating your own website outside Rentec Direct is the ability to integrate your property listings into it.

Rentec Direct has developed two different methods of embedding listings into a custom site:

Embedded iFrame: option, covered in this article, which provides elegant listings with customizable colors
Embedded JSON API: click here for more information: Add Rental Listings to Your Custom Website | JSON API

What Is an iFrame?

An iFrame is like a window that lets you embed content from another website on your own website. Rentec Direct offers nicely designed listings that you can call up in that window. You can pass parameters to control the colors of buttons, titles, and backgrounds to closely match your site's theme.

Listings and Details

Property listings remain within the iframe as the user scrolls through the list. Clicking the Details button opens the property detail page in a new browser tab or window. That allows the user to maintain several open property detail pages for comparison while still searching the properties list.

Clicking the Apply button opens the standard Rentec Direct application process in a new browser tab or window.

How To Embed Listings

Creating an iframe on your site is fairly simple. The following example utilizes style markup to scale to the width of the containing page. Our responsive listings automatically reformat for screen sizes from cell phones to desktops. The minimum width is 320 pixels, a standard for smaller cell phones.

The basic iFrame code is:

<iframe id="iframe_rentec" src="http://yoursite.propertymanage.biz/rentals/listings?iframe=1&search=all" style="width:100%;min-width:320px;height:400px;overflow-y:auto;"></iframe>

To obtain your link for the "src", in the Rentec Direct system, visit Settings -> Program -> Website. Under Advanced Options, you can copy the URL to your clipboard by clicking the clipboard icon to the right of the iFrame URL.

Customizing Colors

The default color scheme for embedded listings is a neutral greyscale. It won't clash with the color schemes of most site designs. However, you can make the listings closely match your site's color theme by passing parameters in the iframe URL. After the "search=all" parameter, append each of these to adjust a color value. Like all URL parameters, these parameter=value pairs will be separated by ampersands.

Color values must be valid HTML hexadecimal. For example, pure red would be FF0000. Your web designer should be familiar with color values. The one exception will be your selection for the bars on the menu icon that is displayed at narrow screen widths. The bars can be either black or white, as noted below.

Custom parameters are:

btn_text_color - Text on the buttons
btn_start_color - Beginning color for button gradient
btn_end_color - Ending color for button gradient
background_color - Background of the entire iframe, behind the listing rows
label_color - The labels and icons for highlighted information, such as bedroom count
menu_bars - If set to "white", menu icon bars are white. Otherwise, they are black.

So, the URL for an iframe that uses a solid blue color scheme for the buttons and labels, with a slightly grey background, would contain the following parameters.

http://yoursite.propertymanage.biz/rentals/listings?iframe=1&search=all&&btn_start_color=0090C7&btn_end_color=0090C7&btn_text_color=FFFFFF&background_color=EEEEEE&label_color=0090C7&menu_bars=white

Important note: The iFrame for property listings is considered an advanced feature for experienced programmers. Rentec Direct does not provide support for advanced programming options.