Add Rental Listings to Your Custom Website | JSON API

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:

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

What is a JSON API?

A JSON API is a special link that allows a programmer to retrieve data, process it, and then use it to display the information in a customized format. That means you can retrieve the property listing data from Rentec Direct, then display it in a manner consistent with your site's theme.

The following steps outline how to access and use the JSON API to add your Rentec Direct property listing to your custom website. If you have created a website through Rentec Direct, your property listings are already on your website.

Step 1 - Create an API Key

You will need to generate a special key to retrieve your own data. The key will be sent along with your data request to verify you are the requester.

While logged into Rentec Direct as the administrator:

1. Click on Settings
2. Under Tools, click on Utilities
3. Click on the API Keys link
4. Click on +Add API Key, then click the Application dropdown to select JSON Listings
5. Click on Generate (You will then see the key and URL displayed)
6. Your programmer can copy the URL to the clipboard using the clipboard icon to the right, then paste it into the jQuery AJAX program code.

Step 2 - Test the JSON Data

Now that you've got your listings' api key set up, you can use the URL, right below the key, to get your data. If you paste this URL into your browser's location, you will see the raw JSON data displayed. The Firefox browser provides nice formatting to JSON data for easier viewing and analysis.

Step 3 - Get Listings via jQuery AJAX

It is time for your javascript programmer to do something useful with the data being retrieved. We are including a code snippet below to retrieve the data with a jQuery AJAX call. The call can be either a GET or a POST. The POST request, in our code sample, provides better security by preventing your key from being intercepted as it travels the internet.

Your programmer will put the URL into the url section of the code and the function can then retrieve the results. How you process the results is beyond the scope of this article and relies upon the knowledge of your programming team.  Rentec Direct does not provide support for advanced programming features.

$.ajax({  type: "POST",  url: "https://secure.rentecdirect.com/owners/utilities/property_listings_JSON.php",  cache: false,  data: [ {name:"key", value:"xyzzy"} ],  dataType: 'json',  success: function(response) {   if (response.errorstring == 'BAD KEY') {    // Handle incorrect key situation    console.log("Bad Key getting JSON property data");   } else if (0 < response.errorstring.length) {    console.log(response.errorstring);   } else {    // handle the response JSON data structure    var property_count = response.properties.length;    for (x = 0; x < property_count; x++) {     // do something with each property's data     console.log( "Property ID: " + response.properties[x].property_id);    }   }  },  error: function (jqXHR, textStatus, errorThrown) {   console.log("Error in Request\n" + textStatus + "\n" + errorThrown);  } });<br>

Put your key into the value in the code and your property listings will be retrieved. How you process the results is beyond the scope of this article and relies upon the knowledge of your programming staff. Some web development tools such as WordPress provide widgets to retrieve and work with JSON data. The results vary considerably.

Important Note: The JSON API for property listings is considered an advanced feature for experienced programmers. Rentec Direct does not provide support for advance programming options.