Embed the booking widget

Add the direct booking form to any page with a script tag or an iframe.

Available onPro

Finding your widget ID

Your booking widget ID is shown in the dashboard under Bookings - Booking Widget. It is the same UUID as your calendar and identifies your booking configuration.

Embed options

Script embed - recommended for WordPress, Webflow, custom HTML

HTML

<!-- 1. Load the booking widget script -->
<script
  src="https://rentalbeam.com/api/rentalbeam-booking-form.js?v=3.0.0"
  async
></script>

<!-- 2. Place the form div where it should appear -->
<div
  class="rentalbeam-booking-form"
  data-calendar-id="YOUR-BOOKING-WIDGET-ID"
  style="width: 100%; max-width: 920px; margin: 0 auto;"
></div>

Iframe embed - recommended for Wix, Squarespace

HTML

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

The booking form height varies with content (fees, custom fields, payment section). Start with height="700" and adjust after previewing on your live site.

Using the calendar alongside the booking widget

The availability calendar and booking widget are independent embeds. A common layout is to embed the calendar above the booking form on the same page - guests check availability, then scroll down to submit their request. Both widgets load availability from the same iCal sources, so they always show consistent dates.

If you want the widgets to communicate - for example, a date selection in the booking widget triggering something on the parent page - see postMessage events.