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.

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 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.

Note: You’ll need a Squarespace Business plan to be able to embed this 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

Make sure the Code block has ‘HTML’ selected as the ‘Mode’ and that ‘Display Source Code’ is unchecked. Like the image below.

And that’s it. You should now have an embedded Airbnb listing on your Squarespace website that displays current photos and details.

Keep in mind that the embedded listing often doesn’t show up in the Squarespace editor, but it should be displaying properly on your public-facing website.

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.

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.

Again, you need a Squarespace Business plan to be able to embed code 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 Guesty for Hosts 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, Guesty for Hosts, 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 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!

Written by The Floorspace Team

This article was written as a collaborative effort by multiple members of the Floorspace team. We're a group of internet marketers and designers, with a wide range of experience marketing and managing short-term rentals.