How-To Guide
5 min read
Updated October 2026

How to add an availability calendar to your Webador vacation rental website

A Webador site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com. Webador's Embed Code element is where widgets from other services go, so the script snippet goes straight in and keeps the calendar sized to its content. The editor shows a placeholder, so the calendar only shows on your live site.

Why add a calendar to your Webador 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
RentalBeam availability calendar widget showing three months of live availability, with available dates in color and booked dates crosshatched
The RentalBeam availability widget: the same calendar you will place on your Webador site.

What you need

  • A Webador 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. 1

    Create your RentalBeam calendar

    1. Open your RentalBeam dashboard and click Add rental.
    2. Paste your Airbnb, Vrbo, Booking.com, or other iCal source URLs.
    3. 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. 2

    Copy the right embed code for Webador

    RentalBeam recommends the script embed for Webador. 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>

    Webador's Embed Code element is where widgets from other services go, so the script snippet goes straight in and keeps the calendar sized to its content.

    Webador publishing reminders

    • The editor shows a placeholder instead of the embedded code. That is normal; check your live site.
    • If the calendar does not appear on the live site, paste the iframe snippet into the same element instead.
  3. 3

    Paste the embed into Webador

    Builder-specific install steps

    Use these steps to place the RentalBeam calendar exactly where guests check dates.

    Webador

    Drag an Embed Code element onto the page, choose Edit embed, and paste the script snippet. It only shows on the live site.

    Recommended: Script

    Webador's Embed Code element is where widgets from other services go, so the script snippet goes straight in and keeps the calendar sized to its content.

    Use the Script tab for this builder.

    1. Open the Editor for the page where guests should check dates
    2. Drag the Embed Code element from the left menu onto the page
    3. Click the element, click Edit embed, paste the RentalBeam calendar script snippet into the input field, and click Save
    4. Open your live site and check the calendar there

    Before you publish

    • The editor shows a placeholder instead of the embedded code. That is normal; check your live site.
    • If the calendar does not appear on the live site, paste the iframe snippet into the same element instead.
  4. 4

    Publish and verify the guest experience

Where to place the calendar on the page

  • Add the Embed Code element right below the part of the page that describes the rental, so guests see the dates while they are deciding.
  • The editor shows a placeholder instead of the calendar. Check your live site.
  • If the calendar does not appear on the live site, paste the iframe snippet into the same element 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.

Troubleshooting

Related guides

How to show availability on your vacation rental websiteHow to sync your Airbnb calendar with your websiteHow to accept direct bookings from your vacation rental websiteHow to add an availability calendar to your WordPress vacation rental websiteHow to add an availability calendar to your Wix vacation rental websiteHow to add an availability calendar to your Squarespace vacation rental websiteHow to add an availability calendar to your Webflow vacation rental websiteHow to add an availability calendar to your Weebly vacation rental websiteHow to add an availability calendar to your GoDaddy vacation rental websiteHow to add an availability calendar to your Framer vacation rental websiteHow to add an availability calendar to your Google Sites vacation rental websiteHow to add an availability calendar to your Hostinger vacation rental websiteHow to add an availability calendar to your Carrd vacation rental websiteHow to add an availability calendar to your Jimdo vacation rental websiteHow to add an availability calendar to your Duda vacation rental websiteHow to add an availability calendar to your Strikingly vacation rental websiteHow to add an availability calendar to your Webnode vacation rental websiteHow to add an availability calendar to your IONOS vacation rental websiteHow to add an availability calendar to your SITE123 vacation rental websiteHow to add an availability calendar to your Zoho Sites vacation rental websiteHow to add an availability calendar to your one.com vacation rental websiteHow to add an availability calendar to your Square Online vacation rental websiteHow to add an availability calendar to your Yola vacation rental websiteHow to add an availability calendar to your Mozello vacation rental website

Webador calendar questions

Can I use RentalBeam on Webador?

Yes. RentalBeam works on Webador with a standard embed flow, so you can publish live availability without a full PMS or a custom site rebuild.

Should I use a script or iframe on Webador?

Webador's Embed Code element is where widgets from other services go, so the script snippet goes straight in and keeps the calendar sized to its content. In practice, script is the best default for Webador.

Will this sync with Airbnb, Vrbo, and Booking.com?

Yes. RentalBeam supports any iCal URL, so you can import Airbnb, Vrbo, Booking.com, Google Calendar, and other compatible sources into one calendar.

Do I need a property management system?

No. RentalBeam is for hosts who want synced availability and direct-booking tools without paying for a full PMS stack.

rentalbeam.com/dashboard/rentals/6f1d2c4e-3b7a-4c58-9e21-8a0f5d7b2c19/widgets/calendar
A rental's Calendar widget section: a live three-month preview, its embed code, and the color presets below

Add your Webador availability calendar today

Create your RentalBeam calendar, connect your OTA feeds, and publish a guest-friendly availability view on your own website in minutes.