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, Weebly, custom HTML

HTML

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

<!-- 2. Place the form div where it should appear -->
<div
  class="rentalbeam-booking-form"
  data-rental-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>

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

If you copied a script embed before this page showed data-rental-id, no changes are needed - older snippets using data-calendar-id keep working.

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

Auto-applied promo links

You can hand guests a discount that applies itself. Create a coupon in your booking settings, then add it to the widget one of two ways:

Add data-coupon="SPRING25" to the embed and the coupon opens and applies on load (works for the script and iframe embeds). Or share a link to the page with ?coupon=SPRING25 (or ?rb_coupon=SPRING25) so one link both lands the guest and applies the discount. Guests can still remove the code, and an invalid or expired code just shows as invalid while the rest of the form keeps working.

Compact search-bar entry

Instead of the full form, you can embed a compact bar - Check in / Check out / Guests / Check availability - that opens the full booking widget in a popup when clicked (a bottom sheet on mobile). It is ideal for hero sections, navigation bars, and sticky headers. Pick Search bar under Entry style when you copy your embed code, or add the attribute yourself:

HTML

<div
  class="rentalbeam-booking-form"
  data-rental-id="YOUR-BOOKING-WIDGET-ID"
  data-rb-entry="searchbar"
></div>

For the iframe embed, add ?entry=searchbar to the URL. The same calendar can be embedded both ways on different pages - the entry style travels with each embed, so nothing changes for your existing full-form embeds.

Prefilling dates and guests

Open the widget with values already set - handy for "Book now" links or your own custom search bar. Add data-rb-guests="2", data-rb-checkin="2026-07-01", and data-rb-checkout="2026-07-05" to the embed, or share a link with ?checkin=2026-07-01&checkout=2026-07-05&guests=2. Dates open in the calendar for the guest to confirm against live availability.

Open the widget from your own button

Already have a custom search bar or a "Check availability" button? Call the widget directly:

HTML

<button onclick="RentalBeam.openBooking({ rentalId: 'YOUR-BOOKING-WIDGET-ID', guests: 2 })">
  Check availability
</button>

calendarId is still accepted as the option name here too, if you already have that in a live snippet.

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.