Web Design

Squarespace Airbnb Integration: 4 Ways to Add Your Airbnb to a Squarespace Website

Want to add your Airbnb to a Squarespace website? In this Squarespace Airbnb Integration Guide, we’re going over a few different ways you can.

Squarespace is an increasingly popular website builder for Airbnb hosts and vacation rental property managers, and for good reason. They have beautiful, easy-to-customize templates, and there are several ways you can integrate and embed your Airbnb or other vacation rental listings.

Disclosure: This post contains affiliate links, and we may earn a commission at no extra cost to you.

1. Add a Button or Link to Your Airbnb Listing

This is perhaps quite obvious, but by far the simplest way to add your Airbnb to a Squarespace website is to add a link or button that points to your Airbnb or Vrbo listings.

While this is a very simple and basic solution, it can also be extremely elegant and effective. Don’t let the simplicity of it deter you.

This is a very common approach, and you’ll see a number of examples of Squarespace vacation rental websites that have done exactly this.

Upstate Getaways - Squarespace Vacation Rental / Property Management Website
Upstate Getaways Squarespace website links to Airbnb listings

Upstate Getaways is a good example of how to link to Airbnb listings from a Squarespace website. The “Book a Stay” buttons and menu links point to a page that displays all of their listings (nicely formatted). And the listings on that page link to the individual Airbnb listings.

Alternatively, if you just have one listing, you could skip that page and have the “Book a Stay” link directly to the Airbnb listing.

To create your own website like this, try using the Bailard template. Or check out some other template options that we covered in our post on the best Squarespace vacation rental templates.

2. Embed Your Airbnb Listing

Another fairly simple way to add your Airbnb listing to your Squarespace website is to use Airbnb’s embed code. Airbnb has an option to export code you can use to embed your listing on any website that allows you to add custom code.

Keep in mind you’ll need a Squarespace Business plan to be able to embed code on your website.

Follow these steps to add your Airbnb listing to your Squarespace website:

  1. In Airbnb, go to Listings and select the one you want to share
  2. Click Preview listing and then click Share
  3. Go to Embed and click Copy HTML
  4. In Squarespace, create a Code Block and paste the HTML

And that’s it. You’ll now have an embedded Airbnb listing on your Squarespace website that displays current information about your Airbnb.

Here’s an actual example of an embedded Airbnb listing:

As you can see, an embedded Airbnb listing gets the job done, but it’s fairly basic. It includes the title, a slider gallery of photos, and reviews (which you can disable if you choose).

One thing to note is that it isn’t exactly optimized for displaying on mobile devices. Depending on the size of the device, the embedded Airbnb listing can extend beyond the edge of your website.

To prevent this, we’ve added the following code around the embedded listing displayed above to make it so it doesn’t overflow to the sides on mobile devices and stretch the page.

Mobile Optimized Airbnb Listing Embed Code
Try wrapping your Airbnb HTML output in a div for better mobile display.

Here’s the code from the image above, which you can copy and paste. Simply replace the inner text with your Airbnb HTML output.

<div style="max-width: 100%; overflow: scroll">
INSERT AIRBNB HTML OUTPUT HERE
</div>

This isn’t a perfect solution, since the embedded Airbnb listing still gets cut off and requires the user to scroll. But at least it won’t stretch your whole website and throw off the layout.

3. Embed Your Airbnb Calendar

If you want to take your Airbnb Squarespace integration one step further, you can embed your Airbnb availability calendar on your website.

Because the Airbnb listing embed code doesn’t have an option to display the calendar, you’ll need to use a third-party service.

VR Calendar Sync and Accommodation Calendar are two options to consider, and they both offer free versions you can use. Check out our post for more information and instructions on embedding your Airbnb calendar.

If you’re using vacation rental management software like Your Porter or Lodgify, you can follow their instructions for embedding your vacation rental availability calendar.

4. Add Direct Bookings to Your Website

By far the most comprehensive way to integrate your vacation rental with your Squarespace website (whether you list on Airbnb, Vrbo, or any other booking site), is to add direct bookings.

This can be as simple as pointing your “Book Now” buttons and links to your direct booking pages (from Uplisting, Your Porter, Lodgify, or whichever booking engine you use).

Some vacation rental management platforms also enable you to embed a booking form directly on your Squarespace website. For example, there are a few different ways to integrate Lodgify with Squarespace.

Hinter Vacation Rental Website - Squarespace + Uplisting
Hinter uses Squarespace and Uplisting for direct bookings

Hinter is a great example of combining a Squarespace website with vacation rental software to create a direct booking website. The “Book” button links to a page that displays their listings, and those listings point to the individual Uplisting booking pages.

If you’re interested in taking direct bookings on your Squarespace website, check out our guide on how to create a direct booking website.

And if you want help creating a website or adding your Airbnb or direct bookings, contact us for a quote!

Leave a Reply

Your email address will not be published. Required fields are marked *