We use cookies to keep RentalBeam running and, with your consent, to improve it. See our cookie policy.

RentalBeam
Sign up

Embed the booking widget

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

Available onPro

Finding your rental ID

Your rental ID is a long code with letters and numbers, like a1b2c3d4-e5f6-.... It sits inside the embed code itself. Open the dashboard Bookings tab, open the rental’s booking settings, and read the Widget tab. It is the same ID your availability calendar uses, so one rental has one ID everywhere.

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-RENTAL-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-RENTAL-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, Weebly, GoDaddy, and Framer.
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. Clicking it opens the full booking widget in a popup, or a bottom sheet on mobile. It suits hero sections, navigation bars, and sticky headers.

  1. 1Open the dashboard Bookings tab.
  2. 2Open the rental's booking settings and go to the Widget tab.
  3. 3Under Entry style, pick Search bar.
  4. 4Copy the embed code from that tab and paste it into your page.

Or add the attribute to an embed you already have:

HTML
<div
  class="rentalbeam-booking-form"
  data-rental-id="YOUR-RENTAL-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-RENTAL-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.

What your guest sees

Your guest sees a booking form on your own page. They pick dates, say how many people are coming, and read the price before they commit. Then they send a request, or pay by card if you have that switched on. They stay on your site the whole way through, and you get an email as soon as they submit.

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.