How to add an availability calendar to your Squarespace vacation rental website
Squarespace works well for stylish vacation rental pages, but third-party script support can be inconsistent. The easiest setup is to use the RentalBeam iframe embed inside a Code Block so guests can see live availability without leaving your site.
Why add a calendar to your Squarespace site?
Guests want to know whether your property is available before they click through to a form or send a message. A visible availability calendar shortens that decision path, reduces repetitive date questions, and supports a cleaner direct-booking flow on your own site.
- Show booked and open dates directly on your website
- Keep using Airbnb, VRBO, Booking.com, or any other iCal-compatible source
- Reduce back-and-forth date questions from guests
- Prepare the page for a future direct-booking widget beside the calendar
What you need
- A Squarespace page you can edit
- Your RentalBeam calendar widget
- Connected Airbnb, VRBO, Booking.com, or other iCal feed(s)
Keep setup simple first
Start with one property page, confirm the calendar is visible and accurate, then roll the same pattern across the rest of your site.Setup steps
- 1
Create your RentalBeam calendar
- Open your RentalBeam dashboard and create a calendar.
- Paste your Airbnb, VRBO, Booking.com, or other iCal source URLs.
- Check the preview so blocked dates already look correct before you embed anything.
Works with any iCal source
RentalBeam supports any iCal/ICS URL, not just Airbnb. You can merge multiple availability sources into one guest-facing calendar view. - 2
Copy the right embed code for Squarespace
RentalBeam recommends the iframe embed for Squarespace. Use the matching code format below as your reference.
html<iframe src="https://rentalbeam.com/embed/your-calendar-id?months-per-row=3&rows=1&month-scale=1" width="100%" height="446" frameborder="0" loading="lazy" style="border: none; border-radius: 8px; display: block;"></iframe>Squarespace is generally more dependable with iframe embeds inside Code Blocks than with external script execution.
Squarespace publishing reminders
- Paste the iframe into a Code Block rather than a Markdown or Text Block so Squarespace does not sanitize the embed.
- Leave enough vertical space around the block so the month cards do not feel boxed in by nearby content.
- Review the live published page on mobile after publishing because section padding can change the final spacing more than the editor preview suggests.
- 3
Paste the embed into Squarespace
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: IframeSquarespace
Use a Code Block with the iframe embed for the smoothest install path.
Squarespace is generally more dependable with iframe embeds inside Code Blocks than with external script execution.
Use the Iframe tab for this builder.
- Open the page section you want to edit
- Insert a Code Block
- Paste the RentalBeam iframe embed code
- Save, publish, and confirm the calendar spacing on mobile
Before you publish
- Paste the iframe into a Code Block rather than a Markdown or Text Block so Squarespace does not sanitize the embed.
- Leave enough vertical space around the block so the month cards do not feel boxed in by nearby content.
- Review the live published page on mobile after publishing because section padding can change the final spacing more than the editor preview suggests.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Add the calendar near pricing, inquiry, or direct-booking content instead of burying it deep in a long page.
- Test the page inside Squarespace preview and on a live published URL.
- Leave enough vertical space so the embed does not feel cramped inside the section.
Think of the calendar as a conversion aid
Competitor guides consistently put availability close to the main inquiry or direct-booking action. That pattern reduces friction because guests can check dates and act in the same visual area.