How to add an availability calendar to your Square Online vacation rental website
A Square Online site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com. Square describes its Embed code section in terms of iframe snippets, so the iframe snippet is the recommended path: add the section, paste the snippet, and publish. The section is for Square Online Plus and Premium.
Why add a calendar to your Square Online 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 Square Online site on Plus or Premium
- Your RentalBeam calendar widget
- At least one connected OTA or iCal availability source such as Airbnb or Vrbo
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 click Add rental.
- 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 Square Online
RentalBeam recommends the iframe embed for Square Online. 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>Square describes its Embed code section in terms of iframe snippets, so the iframe snippet is the dependable choice for the calendar.
Square Online publishing reminders
- The Embed code section is for Square Online Plus and Premium.
- Paste the whole snippet. If nothing shows, check that none of it was cut off, then publish again.
- 3
Paste the embed into Square Online
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: IframeSquare Online
Add an Embed code section, paste the iframe snippet, and publish. Needs Square Online Plus or Premium.
Square describes its Embed code section in terms of iframe snippets, so the iframe snippet is the dependable choice for the calendar.
Use the Iframe tab for this builder.
- In Square Dashboard, go to Channels, then Square Online, choose Website, and click Edit site
- Open the page where guests should check dates, click Add, then Section, and choose Embed code
- Select Embed code in the editing panel and paste the RentalBeam calendar iframe snippet into the text box
- Publish your site and check the calendar on the live page
Before you publish
- The Embed code section is for Square Online Plus and Premium.
- Paste the whole snippet. If nothing shows, check that none of it was cut off, then publish again.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Add the Embed code section right below the part of the page that describes the rental, so guests see the dates while they are deciding.
- Paste the whole iframe snippet. A snippet that is cut off can break the page.
- Publish, then check the live page on a phone.
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.