How to add an availability calendar to your Webflow vacation rental website
Webflow is a strong fit for polished vacation rental websites because it gives you layout control without forcing a full PMS workflow. RentalBeam fits neatly into that setup: connect your iCal sources, paste the script embed into a Webflow Embed component, and publish live availability on your own site.
Why add a calendar to your Webflow 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 Webflow page you can edit in Designer
- Your RentalBeam calendar widget
- At least one connected iCal source such as Airbnb, VRBO, or Booking.com
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 Webflow
RentalBeam recommends the script embed for Webflow. Use the matching code format below as your reference.
html<script src="https://rentalbeam.com/api/rentalbeam-calendar.js" async></script> <div class="rentalbeam-calendar" id="your-calendar-id" data-months-per-row="3" data-rows="1" data-month-scale="1"></div>Webflow supports custom embed components, so the standard script snippet is usually the cleanest option.
Webflow publishing reminders
- Use an Embed component on the final page where guests check dates rather than burying the calendar in a secondary CMS region.
- Check the published site after any layout-control changes so the live widget reflects the newest months-per-row and sizing choices.
- Keep enough container width around the widget so multiple months per row do not collapse into an awkward narrow column.
- 3
Paste the embed into Webflow
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptWebflow
Great for script installs when you can use an Embed component.
Webflow supports custom embed components, so the standard script snippet is usually the cleanest option.
Use the Script tab for this builder.
- Open the target page in Designer
- Drag in an Embed component
- Paste the RentalBeam calendar script snippet
- Publish the site and verify the responsive layout
Before you publish
- Use an Embed component on the final page where guests check dates rather than burying the calendar in a secondary CMS region.
- Check the published site after any layout-control changes so the live widget reflects the newest months-per-row and sizing choices.
- Keep enough container width around the widget so multiple months per row do not collapse into an awkward narrow column.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Place the calendar near pricing, inquiry, or direct-booking copy so guests can act right after checking dates.
- Give the calendar a comfortably wide container so multi-month layouts do not feel cramped.
- Always verify the published page after Webflow layout changes so the live embed still has enough vertical space.
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.