Inspiration

We are a full service agency that’s been delivering for organisations across the globe for over 20 years. We have worked and researched extensively in the property sector and enjoy finding user centric solutions to complex business problems.

What it does

Landen is a property listings and financial services site. One of the main areas of the website is 'For Sale' where the user can search/filter/view available properties which are pulled from HubSpot CRM. On each of the property pages the user can generate and download a branded property PDF. There is also a blog area of the site along with a selection of brand validating content pages.

How we built it

The first challenge we were presented with was developing a dynamic property listing using HubSpot CRM & CMS.

At first we thought HubDB was a very attractive option. Easy to set up, easy to maintain - a straightforward approach for managing data. Users are already familiar with tools like spreadsheets so HubDB is just that, a spreadsheet where you can manage your website’s content. HubDB was also validated by HubSpot support staff as the solution of choice. However, whilst great, HubDB ultimately wasn’t the solution we were looking for. The reason why we didn't use HubDB is because of client requirements to generate custom reports based on the property’s availability status. Another requirement was if the status of the property listing has been changed to sold, that should automatically take the property listing off the website. To generate such reports from HubDB, we would be required to build a new front end tool - that allows the client to login, pull data, assemble reports, and present the charts to the user. And that would be a very complex and time consuming approach. As it turns out HubSpot already has a chart/reporting platform and we had to find a way to feed data to the reports. We looked at APIs and HubDB integration, but no luck there. Until we looked into custom objects. Custom objects integrate perfectly with the reporting platform and so much more.

So how exactly did the use of custom objects help? Well thanks to Hub+L it was fairly easy to pull data from HubSpot to the FrontEnd. We basically hit two birds with one stone. We were able to satisfy client requirements, which was the ability to run reports on all property sales, by changing a status for each property listing, taking property offline if it's sold, and also deliver the same content to the visitors on the front end.

Was there any challenges connecting the CRM to the frontend i hear you asking?

There were plenty of challenges when connecting CRM to the front end. Sorting of the property listings by one of the custom properties or attributes of the object. Not being able to have a file or image field for a custom object, eventually we have settled for a text field. We would upload files via file manager and simply copy/paste the url to the image. Pagination was tricky, but with the resources available, and our highly skilled team this problem was easily overcome.

The second challenge was to find a way we could download & generate serverless property PDF brochures.

How did we use HubSpot to solve the problem? One of the client's requirements was a request for an auto generated pdf with the latest data from HubSpot. It wasn't easy to solve this problem especially after coming across this support ticket which I found by googling generate pdf with HubSpot https://community.hubspot.com/t5/APIs-Integrations/Generate-the-dynamic-pdf-in-hubspot/td-p/224918 But if you swap HubSpot for node.js, and google generate pdf with node.js. You will discover a whole new universe of possibilities.

So the next challenge was to get HubSpot to communicate with NodeJS.

1. How did we handle the frontend?

Serverless to the rescue. On the first try, we wanted to upload all scripts directly to HubSpot and run our function front here. We were very excited when we learned about HubSpot allowing custom packages via package.json inclusions. But later were saddened to learn that this feature was still in beta. The other option of course was to use webpack to bundle all our js, upload to HubSpot and run it that way. But because we had previous experience with AWS Lambda, we decided to take this approach. So the solution we designed is to have a HubSpot serverless function that communicates with AWS Lambda, on the frontend we trigger the HubSpot serverless function, all the property listing data is passed to AWS. Using Pug templates we are generating a html page and Puppeteer will print that page with all the data to a pdf. The response is encoded as base64 string and passed back to the HubSpot serverless which prompts the browser to download a pdf.

What's next for Landen Property - CRM Strategy & Website Development

We continue to work with Landen to expand their Marketing strategy, CRM functionality and website features. Huge shout out to HubSpot & all the team there. HubSpot is such a great platform that delivers meaningful and measurable benefits to our clients businesses, whilst also being awesome for us to work with everyday.

Built With

Share this project:

Updates