Can I integrate Hemlane into my own website?

Austin Schaeffer
  • Updated

Whether you’re a real estate agent, manager, or investor, you may have an existing website. Hemlane can sync with your website to post real-time updates on your available (and currently leased) rentals. Our great user experience and design keep your website looking sharp and professional. 

 

PLEASE NOTE:

While Hemlane provides integration options for our users, we do not offer website design or implementing of the integration ourselves. If you are needing assistance with your website and/or integration with Hemlane, we highly suggest enlisting a webmaster or website developer to assist you with your needs or you can get your website started using websites such as Wix.com, Squarespace.com, and many others.

 

How do I integrate Hemlane listings into my own webpage?

Hemlane allows you to integrate your rental listings and information into your own webpage via iFrame. It will keep your website up-to-date with the latest open rentals. Whether you are talking to an owner or a tenant, you can refer them to your own website rather than our website. 

 

STEP 1: Add your rental units in Hemlane

Once you've finished adding your properties and started marketing your available units, you can find your public listings page by navigating to the Marketing tab and clicking on the button labeled "View All Listings."

This will open a page in a separate tab with a URL that looks like this:

             https://www.hemlane.com/listings/owners/{a long string of letters and numbers}

 

This page is open and accessible to the public and can be shared and viewed by anyone. However, if you are interested in integrating this listings page into your own personal or company website, this page can be customized to integrate neatly using iframes.

The first step is figuring out how you want to customize your listings page for the iframe. There are a few options available to you that can be accessed by adding a query string to your listings URL (all of which are optional):

 

embed   

Setting this parameter to true will remove the header and footer of the listings page so that you are presented with just the content for easier placement of the listings. You will most likely want to set this parameter.

 

background

You can provide a hex color code (without the pound sign) to this parameter to control the background color of the listings section. You can utilize this to match the listings page background to the color of your own site for a seamless integration. For example, if the background color of your site is lime green, you can feed in 32CD32 to this parameter and the listings page will match. If you do not provide this parameter, it will default to the white that you see.

 

filter

This parameter behaves the same way as the background parameter, and dictates the background color of the top part of the listings page containing the filter, allowing you to further customize the colors to your liking. If you do not provide this parameter, it will default to the gray color.

 

title

You can supply this parameter if you wish to change the heading that appears in the top of the filter section (currently defaulted to {Your Name}'s Properties). Because we are dealing with query strings, be sure to URI-encode your desired string. For example, if you want it to say "My Properties," you would type this:

                                                               title=My%20Properties

Note that the space between "My" and "Properties" had to be converted to "%20" in the string. If you want the heading to be blank, you can also just supply a single space ("%20") for this parameter.

 

Once you've built up your query string with your desired parameters, just the parameters with an ampersand (&) and add it to the end of the URL for your listings page with a question mark at the beginning and you will be good to go. For example, if you want your listings page to have a lime green background with a salmon colored filter section, with the title "Hello and welcome" with the header and footer removed, your query string would look like this:

embed=true&background=32CD32&filter=FA8072&title=Hello%20and%20welcome

 

And finally, add it to the end of your listings page url with a question mark, so the full URL looks like this:

https://www.hemlane.com/listings/owners/{a long string of letters and numbers}?embed=true&background=32CD32&filter=FA8072&title=Hello%20and%20welcome

 

Or perhaps a more sensible demonstration: leaving the colors as their default and simply changing the title to "Available Listings":

https://www.hemlane.com/listings/owners/{a long string of letters and numbers}?embed=true&title=Available%20Properties

 

STEP 2: Set the source of your iframe

Now that you have the desired URL, you can go ahead and set the source of your iframe to this URL. It is recommended that you set the width to 100% for best results. To best set the height of the iframe, we can utilize a script. The easiest way to do this is by simply setting an empty div element where you want the listings to appear, with the id of "hemlane-listings-embed-container" and adding this script towards the end of your HTML body.

 

<script>
    var i = document.createElement('iframe');
    i.id = 'hemlane-owner-listings-embed-frame';
    i.width = '100%';
    i.scrolling = 'no';
    i.src =
      'https://www.hemlane.com/listings/owners/ long string of letters and numbers}?embed=true&title=Available%20Properties';
    i.style = 'margin:0;padding:0;border:0;overflow:hidden;';
    i.onload = function() {
      var el = document.getElementById('hemlane-owner-listings-embed-frame');
      if (el) {
        window.addEventListener('message', function(e) {
          if (console && console.log) { console.log(e); }
          var possibleHeight = parseInt(e.data, 10);
          if (!isNaN(possibleHeight)) {
            if (e.origin === 'https://www.hemlane.com') {
              document.getElementById(
                'hemlane-owner-listings-embed-frame'
              ).height = possibleHeight;
            }
          }
        });
        el.contentWindow.postMessage('get_hemlane_listing_page_height', '*');
      }
    };
    document.getElementById('hemlane-listings-embed-container').appendChild(i);
</script>

 

Please Note: you need to replace {a long string of letters and numbers} in the above code with the sequence that you get when you navigate to your own listings page.

 

STEP 3: Incorporate Call to Action (CTA) Buttons (Optional)

As you integrate Hemlane to your website, we recommend including some Call to Action (CTA) buttons with text to drive your users to their Hemlane portal. Below are some examples of how this can be used: 

  1. Tenant Portal 
  2. Pay Rent Online
  3. Submit Repair Request   
  4. Owner Portal

These pages can direct your users to the Hemlane login page or www.hemlane.com/for-tenants 

 

 

 

 

Keywords: Integration, website, iframe, listings, GraphQL, embed, background, title, filter

Related articles