Can I Integrate Hemlane Into My Own Website?

Tanner C.
  • Updated

Whether you are a real estate agent, manager, or investor, you may already have a website. Hemlane can sync with your website to post real-time updates on your available and currently leased rentals, keeping your site looking sharp and professional.

 

PLEASE NOTE: While Hemlane provides integration options, we do not offer website design or implement the integration ourselves. If you need help with your website or the integration, we highly suggest enlisting a webmaster or website developer. You can also get a website started using platforms 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 into your own webpage via iFrame. This keeps your website up to date with your latest open rentals, and lets you refer owners and tenants to your own website rather than ours.

 

Step 1: Add Your Rental Units in Hemlane

Once you have added your properties and started marketing your available units, you can find your public listings page by navigating to the Marketing tab and clicking the View All Listings button.

This opens 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 public and can be shared and viewed by anyone. If you would like to integrate it into your own website, you can customize it to fit neatly using an iFrame.

Start by deciding how you want to customize the listings page. You can do this by adding a query string to your listings URL. All of the options below are optional.

 

Embed

Setting this parameter to true removes the header and footer of the listings page so that only the listings content is shown, which makes placement easier. You will most likely want to set this parameter.

 

Background

Provide a hex color code, without the pound sign, to control the background color of the listings section. This lets you match the listings page to your own site. For example, if your site background is lime green, enter 32CD32. If you do not provide this parameter, it defaults to white.

 

Filter

This works the same way as the Background parameter, but controls the background color of the top section of the listings page that contains the filter. If you do not provide this parameter, it defaults to gray.

 

Title

Use this parameter to change the heading at the top of the filter section, which defaults to “{Your Name}’s Properties.” Because this is part of a query string, be sure to URI-encode your text. For example, to display “My Properties,” you would enter:

 
title=My%20Properties

Note that the space between “My” and “Properties” is converted to %20. If you want the heading to be blank, supply a single space (%20) for this parameter.

 

Building Your Query String

Once you have chosen your parameters, join them with an ampersand (&) and add them to the end of your listings page URL, starting with a question mark. For example, a lime green background, a salmon colored filter section, the title “Hello and welcome,” and the header and footer removed would look like this:

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

The full URL would then look 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, for a simpler example that leaves the colors as default and only changes the title to “Available Properties”:

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 your desired URL, set it as the source of your iFrame. We recommend setting the width to 100% for best results.

To set the height automatically, you can use a script. The easiest way is to place an empty div element where you want the listings to appear, with the id hemlane-listings-embed-container, and then add the script below toward 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 code above with the sequence from your own listings page URL.

 

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

As you integrate Hemlane into your website, we recommend including Call to Action (CTA) buttons that drive users to their Hemlane portal. Some examples include:

  • Tenant Portal
  • Pay Rent Online
  • Submit Repair Request
  • Owner Portal

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

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

Related articles