Embed the calendar

Add the availability calendar to any page with a script tag or an iframe.

Available onFreePlusPro

Finding your calendar ID

Your calendar ID is shown in the RentalBeam dashboard under Rentals. It looks like a UUID: a1b2c3d4-e5f6-.... Copy it and replace YOUR-CALENDAR-ID in the snippets below.

Choosing an embed mode

Mode	Best for	Notes
Script embed	Every builder - WordPress, Wix, Squarespace, Webflow, Weebly, custom HTML	Responsive, no fixed height needed, closest to native behavior
Iframe embed	Platforms that strip script tags	Renders without JavaScript, isolated from page styles

Using a website builder? Follow the step-by-step builder guides for WordPress, Wix, Squarespace, Webflow, and Weebly.

Script embed

HTML

<!-- 1. Load the script once, anywhere on the page -->
<script
  src="https://cdn.rentalbeam.com/v1/embed.js"
  async
></script>

<!-- 2. Place the calendar div where you want it to appear -->
<div
  class="rentalbeam-calendar"
  data-rental-id="YOUR-CALENDAR-ID"
></div>

Iframe embed

HTML

<iframe
  src="https://rentalbeam.com/embed/YOUR-CALENDAR-ID"
  width="100%"
  height="420"
  frameborder="0"
  style="border: none;"
></iframe>

When using the iframe embed, start with height="420" for a single row of 3 months and adjust after previewing on your live site.

Copied your embed code earlier? No changes are needed - snippets using a previous script address or id="..." keep working.

On phones

The calendar is built mobile-first. On a touch screen, guests can swipe left or right across the calendar to move to the next or previous months - the month arrows still work too. Vertical scrolling of your page is unaffected, so the swipe never gets in the way. Nothing to configure; it works on every embed.

Cookie Consent