How to add an availability calendar to your Zoho Sites vacation rental website
A Zoho Sites site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com. The Zoho Sites Code Snippet element supports HTML, CSS and JavaScript, so the script snippet runs and keeps the calendar sized to its content. The Code Snippet element cannot be previewed, so the calendar only shows after you publish.
Why add a calendar to your Zoho Sites 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 Zoho Sites site you can edit
- 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 Zoho Sites
RentalBeam recommends the script embed for Zoho Sites. Use the matching code format below as your reference.
html<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script> <div class="rentalbeam-calendar" data-rental-id="your-calendar-id" data-months-per-row="3" data-rows="1" data-month-scale="1"></div>The Zoho Sites Code Snippet element supports HTML, CSS and JavaScript, so the script snippet runs and keeps the calendar sized to its content.
Zoho Sites publishing reminders
- Zoho Sites cannot preview a code snippet, so publish the site to see it.
- If the calendar does not appear, paste the iframe snippet into the same Code Snippet instead.
- 3
Paste the embed into Zoho Sites
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptZoho Sites
Drag a Code Snippet element onto the page and paste the script snippet. Zoho Sites cannot preview it, so publish to check.
The Zoho Sites Code Snippet element supports HTML, CSS and JavaScript, so the script snippet runs and keeps the calendar sized to its content.
Use the Script tab for this builder.
- Open the page where guests should check dates in the Zoho Sites builder
- Click the Add icon at the top, choose Elements, and drag the Code Snippet element onto the page
- Name the snippet and click OK, paste the RentalBeam calendar script snippet into the Code Snippet window, and click OK
- Publish the site and check the calendar on the live page
Before you publish
- Zoho Sites cannot preview a code snippet, so publish the site to see it.
- If the calendar does not appear, paste the iframe snippet into the same Code Snippet instead.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Add the Code Snippet right below the part of the page that describes the rental, so guests see the dates while they are deciding.
- Zoho Sites cannot preview a code snippet. Publish the site, then check the calendar on the live page.
- If the calendar does not appear, paste the iframe snippet into the same Code Snippet instead.
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.