I had heard Houfy was a great tool to use to integrate reservations directly into a website. It was fairly easy but there were a few tricky things. I also didn’t find any blogs or online resources that walk users through an easy setup, so I’ve tried to do that here.
The Facebook page “Say Yes To Houfy” is moderated by Houfy customer service and was immensely helpful in helping me integrate Houfy into my site. So definitely use that as a resource.
Initial Setup
Step 1: List Property with Houfy
I listed my property with Houfy. That setup was very intuitive. Once it’s live, it will be available to any guests who choose to search for a property on Houfy. But Houfy does not market the properties on their site, nor are they one of the big go-to reservation sites for travelers, so you’ll want to market your listing on your own. To do that, I built a website.
Before continuing, one of the most important steps is to also connect a payment to your Houfy listing. They offer the choice of two third-party platforms: Stripe or Square. I chose Stripe as it seems to be better for online-only transactions while Square is better for point-of-sale transactions; since all my transactions occur online before the guest checks in, I chose Stripe. The reservation widget (described below) will only work if that’s complete.
Step 2: Build Personal Website
For my site, I purchased a URL and used WordPress to build it. I won’t go into those details here. But all of this is based on using WordPress. I’m not sure how it would differ with another website building tool.
After lots of trial and error, I settled on the Olsen Light theme for my WordPress site.
In WordPress, I created a “Guest Apartment” page to describe my listing. Throughout that page, I embedded buttons like the one below to take viewers to my “Make a Reservation” page (the buttons say things like “Book Now!” or “Reservations”).
Step 3: Build a Reservations Page
One of the pages on my website is “Make a Reservation.” Besides introduction text, it almost exclusively made up of Houfy widgets. The widgets allow certain parts of my Houfy listing to display on this reservation page on my site. In edit mode, this is the entirety of what my reservation page looks like. Keep reading to find out how I added these widgets.
How Do You Copy Houfy Widgets?
Assuming you now have a Houfy listing (with Stripe or Square set up) and your website, you’re ready to begin.
Here I will walk you through how I connected my Houfy listing to my WordPress website using Houfy widgets embedded in my WordPress site.
Here are the three widgets I used and the order they appear in my site…
1. Reservation
The first widget I used was for Quotes.
In Houfy, I found what I needed in Edit Listing > Pricing > Rates & Fees.
I scrolled down to the bottom of this Photos page and found one red “Quote Tool” widget button.
Once I selected “Quote Tool,” I found two tabs; I selected the “Using iframe widget” tab. I found the URL that I needed right there, as well as how it will display on my site. I clicked on the little button at the end of the URL to copy it.
Then I went to my WordPress reservation page. Using Block Editor, I added a “custom html” block to my page.
I pasted the Houfy widget URL (that I already copied from Houfy) into that block. Then I hit Update to update my page (you could also Save Draft and View if your page is not published yet).
Check out how it appears on my site.
2. Photos
The second widget I used was for the Photos.
In Houfy, I found what I needed in Edit Listing > Photos.
I scrolled down to the bottom of this Photos page and found one red “Photos” widget button.
Once I selected “Photos,” I found two tabs; I selected the “Using iframe widget” tab. I found the URL that I need right there, as well as how it will display on my site. But before I copied the URL, I played around with the Display layout option on the left (for some reason, choosing 4 rows and 12 columns allows the viewer to scroll through the photos, although I really don’t know how that works). Once I was satisfied with the display, I clicked on the little button at the end of the URL to copy it.
Then I went to my WordPress reservation page. Using Block Editor, I added another “custom html” block to my page.
I pasted the Houfy widget URL (that I had already copied) into that block. Then I hit Update to update my page (you could also Save Draft and View if your page is not published yet).
Check out how it appears on my site.
3. Listing Overview Widget
The third widget I used was for the Listing Overview. I choose this one last because of how it displays (the user has to choose “read more” to see everything—even though it takes up the full amount of real estate on your page. So until you select “read more,” there’s a lot of blank white space on your screen. Sort of weird. So if you have this before another block, it will default to quite a bit of white space before getting to the next block. Play around with it to see what I mean. Or just trust me and put this block last like I did 🙂
In Houfy, I found it in Edit Listing > Overview > Property details.
I scrolled down to the bottom of the Property details page and found two red widget buttons. I chose “Overview.”
Once I selected “Overview,” I find two tabs; I selected the “Using iframe widget” tab. I found the URL that I needed right there, as well as how it will display on my site. I clicked on the little button at the end of the URL to copy it.
Then I went to my WordPress reservation page. Using Block Editor, I added a third “custom html” block to my page.
I pasted the Houfy widget URL (that I had already copied) into that block. Then I hit Update to update my page (you could also Save Draft and View if your page is not published yet).
Check out how it appears on my site.
Now What?
Once I was comfortable with my reservation page and it was live, I was able to direct guests directly to my site to make reservations! It’s important to note that Houfy is only a vehicle for making reservations. They do not market listings in any way. Nor are they one of the go-to short-term-rental sites for most travelers (like Airbnb or VRBO). But I have been so happy with how my reservation page turned out with the help of Houfy.
When reservations are made through Houfy, I have it set up to notify me by text and email. And since I have my Airbnb, VRBO, and Houfy calendars all linked up (google that to find out how to do that directly through your listings), the calendar on my reservation page is always up to date!
Note that it seems to take Stripe payments about a week to appear in my bank account.
EDIT 10/5/23: Very soon, Houfy will be charing $9.99/month for the service that includes widgets. In my opinion, the expense to have a direct-booking site is well worth it!