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

Squarespace is a popular website builder for Airbnb hosts and vacation rental property managers, and for good reason — it’s easy to use, affordable, and comes with a range of beautiful, customizable template.

And while there’s no Squarespace Airbnb integration, there are a few simple ways to add your Airbnb listings to your website. We’ll cover each one to help you decide which is best for your website.

1. Add a Button or Link to Your Airbnb Listing

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.

The Eddy is a good example of how to link to Airbnb and Vrbo listings from a Squarespace website. The “Book” link in their header menu goes to a page with links to book on Airbnb or Vrbo.

Alternatively, if you just have one listing or listing site, you could skip that page and have the “Book” menu link point directly to your listing.

To create your own website like this, try using the Bailard template. Or if you’re looking for more Squarespace Airbnb templates, check out our list of 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 Lodgify, you can follow their instructions for embedding your vacation rental availability calendar.

4. Add Direct Bookings to Your Website

The most comprehensive way to integrate your property listings with your Squarespace website (whether you list on Airbnb, Vrbo, or any other booking site), is to add direct bookings to your website.

This can be as simple as pointing your “Book Now” buttons and links to your direct booking pages (from Uplisting, 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!