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 Calendars. 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, custom HTML	Responsive, no fixed height needed, closest to native behavior
Iframe embed	Wix, Squarespace	Works when scripts are blocked, isolated from page styles

Script embed

HTML

<!-- 1. Load the script once, anywhere on the page -->
<script
  src="https://rentalbeam.com/api/rentalbeam-calendar.js?v=3.0.0"
  async
></script>

<!-- 2. Place the calendar div where you want it to appear -->
<div
  class="rentalbeam-calendar"
  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.