Property Management, Tenant Selection, Real Estate News & Tips

Rental Listings IFrame – Add Rental Listings To Your Website

IFrame rental listings

The following article is related to advanced programming features for your property management website.  This article was written to provide guidance to your webmaster or website designer.

Adding Rental Listings to Your Custom Property Management Website

While Rentec Direct provides a free property listings 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 for a custom website created outside of Rentec Direct’s included features, you have additional options for customization. From these clients, we have seen some truly awesome and beautifully designed websites for their property management business.

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

Rentec Direct has developed two different methods of embedding listings into a custom site. This article covers the embedded iframe option, which provides elegant listings with customizable colors.

What Is an IFrame?

An iframe is like a window that allows you to embed the content of another website inside your own website. Rentec Direct offers nicely designed listings that you can call up in that window. You can pass in parameters to control colors for buttons, titles and background colors to closely match your site’s theme.

Listings and Details

Rental Property Listings

Property listings remain contained in the iframe. A click on the Details button opens up 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.

A click on the Apply button takes the user to the standard online rental application process in a new browser tab or window.

How To Embed Listings

The code to create an iframe in your site is fairly simple. The following example uses style markup to make it scale to the width of the containing page. The responsive listings automatically reformat for widths from the cell phone screen up to desktop screens. The minimum width is 300 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:300px;height:400px;overflow-y:auto;"></iframe>

To obtain your link for the “src”, in the Rentec Direct system, visit Settings -> Professional Website & Branding. 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 grey scale. It won’t clash with the color schemes of most site designs. However, you can make the listings closely match your site 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 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&menu_bars=white&label_color=0090C7

Listings Enhance Your Website

With this new addition to the Rentec Direct system, you can embed your property listings seamlessly in your custom website. Visitors will enjoy a visually appealing interface to quickly find the property they want.

This update is thanks to requests from Rentec Direct customers like yourself. We continue to improve our system to better serve your needs and welcome your comments and suggestions for improvement.


Related Reading For You:

Tags: , ,

About the Author

About the Author: Viken is a software developer specializing in web and mobile applications. When not at the computer, he enjoys the wonderful climate of Southern Oregon and all the outdoor activities that it offers. His coding and activity time is fueled by a plethora of organic, natural foods and Yerba Mate tea. .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

There Are 2 Brilliant Comments

Trackback URL | Comments RSS Feed

  1. John says:

    Hi, I am currently developing/designing a website for a client that utilizes your platform. While I find the iframe code very useful and easy to implement, I am having an issues with it not showing up on my page. I think the issue is the link within the iframe does not have an SSL certificate. If you could please elaborate the best work around for this that would be great. Thank you!

Post a Comment

Top