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 every builder

HTML

<!-- 1. Load the booking widget script -->
<script
  src="https://cdn.rentalbeam.com/v1/embed.js"
  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 - fallback if your platform strips scripts

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.

Copied your embed code earlier? No changes are needed - snippets using a previous script address or 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.

When the bar runs inside an iframe - the iframe embed, or a builder that sandboxes custom code (such as Wix's Embed Code element) - a popup cannot cover the surrounding page, so the bar opens your booking page in a new tab instead. This happens automatically; on regular script embeds the popup stays on your page.

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', checkIn: '2026-07-01', checkOut: '2026-07-05', guests: 2 })">
  Check availability
</button>

calendarId is still accepted as the option name here too, if you already have that in a live snippet. checkIn/checkOut are optional - same behavior as the data-rb-checkin/data-rb-checkout attributes above: a stale date is dropped and the guest just picks fresh, never forced.

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.