How to add an availability calendar to your Carrd vacation rental website
A one-page Carrd site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com. Carrd's Embed element with Type set to Code places the snippet straight into the page, so the script embed is the recommended path and the calendar sizes itself. Embeds need Carrd Pro Standard or higher, and they only show on the published site.
Why add a calendar to your Carrd 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 Carrd site on Pro Standard or higher
- 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 Carrd
RentalBeam recommends the script embed for Carrd. 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>Carrd's Embed element with Type set to Code places the snippet straight into the page, so the script embed keeps the calendar sized to its content.
Carrd publishing reminders
- Embeds need Carrd Pro Standard or higher. On a free site the Embed element is not available.
- Paste the snippet exactly as RentalBeam gives it to you. Carrd warns that a mistake in embedded code can leave the published page blank.
- Embeds show only on the published site, so a blank space in the builder is normal.
- 3
Paste the embed into Carrd
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptCarrd
Add an Embed element, set Type to Code, and paste the script snippet. Needs Carrd Pro Standard or higher.
Carrd's Embed element with Type set to Code places the snippet straight into the page, so the script embed keeps the calendar sized to its content.
Use the Script tab for this builder.
- Open your site in the Carrd builder
- Add an Embed element where guests should check dates
- Set Type to Code and Style to Inline, then paste the RentalBeam calendar script snippet
- Publish the site and check the live page, because embeds do not show in the builder
Before you publish
- Embeds need Carrd Pro Standard or higher. On a free site the Embed element is not available.
- Paste the snippet exactly as RentalBeam gives it to you. Carrd warns that a mistake in embedded code can leave the published page blank.
- Embeds show only on the published site, so a blank space in the builder is normal.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Add the Embed element right under the section that describes the rental, so guests see the dates while they are deciding.
- Set Style to Inline so the calendar sits exactly where the element is.
- Publish to check the result. Carrd does not show embeds inside the builder.
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.