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	WordPress, Webflow, Weebly, custom HTML	Responsive, no fixed height needed, closest to native behavior
Iframe embed	Wix, Squarespace	Works when scripts are blocked, 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://rentalbeam.com/api/rentalbeam-calendar.js?v=3.1.0"
  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.

If you copied a script embed before this page showed data-rental-id, no changes are needed - older snippets using 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.