SITE123 integration

Add a booking calendar to SITE123

To add a booking calendar to SITE123, copy your website code from RentalBeam and paste the iframe snippet into a Custom Code page. Guests see your open dates, synced from Airbnb, Vrbo and Booking.com. The calendar is free on every plan; the booking form (Pro) and the map (Plus or Pro) paste in the same way.

See every builder
RentalBeam availability calendar showing three months, with open dates in color and booked dates crosshatched

Availability calendar

Paste the calendar into SITE123. Free on every plan. Use the iframe snippet in a Custom Code page.

rentalbeam.com/dashboard
A rental's Availability calendar section: a live three-month preview, its website code, and the color presets below

What you need

  • A SITE123 site on a premium plan
  • Your RentalBeam calendar widget
  • At least one connected OTA or iCal availability source such as Airbnb or Vrbo

Steps

  1. In the SITE123 editor, open Pages and add or open a Custom Code page
  2. Click inside the code area and paste the RentalBeam calendar iframe snippet
  3. Open Custom Height on the right and drag the slider until every month shows
  4. Save, publish, and check the live site

Before you publish

  • Custom code needs a SITE123 premium plan.
  • If the bottom of the calendar is cut off, drag Custom Height higher. The space never grows by itself.
  • SITE123 does not support custom code pages directly, so paste the snippet exactly as RentalBeam gives it to you.

Where to put it

  • Drag Custom Height until the last row of months shows in full. The space never grows by itself.
  • Link the Custom Code page from your main menu, so guests find the dates.
  • Check the live site on a phone after saving.

The iframe snippet looks like this

html
<iframe src="https://rentalbeam.com/embed/your-rental-id" width="100%" height="459" frameborder="0" loading="lazy" style="border: none; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: block;"></iframe>

SITE123 shows custom code at a fixed height that you set with a slider, so it cannot grow with the calendar. The iframe snippet fills that space predictably.

Booking form

Take booking requests on SITE123. On Pro. Guests pick dates, see the price and send a request.

rentalbeam.com/dashboard
A rental's Booking form section: the live form preview with its website code beneath

Steps

  1. In the SITE123 editor, open Pages and add or open a Custom Code page
  2. Click inside the code area and paste the RentalBeam booking widget iframe snippet
  3. Open Custom Height and set it taller than the form looks at first
  4. Save, publish, and send a test inquiry from the live site on a computer and a phone

Before you publish

  • Custom code needs a SITE123 premium plan.
  • Use the full booking form, not the compact search bar, since the code area is a fixed frame.
  • Send one real test inquiry from the published site to confirm the email reaches you.

Where to put it

  • Set Custom Height taller than the form looks at first, since it gets longer as guests fill it in.
  • Use the full booking form, not the compact search bar.
  • Send your test inquiry from the published site, on a computer and on a phone.

The iframe snippet looks like this

html
<iframe src="https://rentalbeam.com/embed/bookingform/your-rental-id" width="100%" height="640" frameborder="0" allowTransparency="true" allow="payment *" loading="lazy" style="border: none; background: transparent; border-radius: 8px; display: block; max-width: min(100%, 840px); margin: 0 auto;"></iframe>

The booking form grows as guests fill it in, and SITE123 keeps custom code at the height you set, so the iframe snippet with a generous height keeps the whole form in reach.

Map

Show where your rental is on SITE123. On your own website with Plus or Pro. Exact pin or approximate area.

rentalbeam.com/dashboard
A rental's Map section: the styled map preview with the five theme choices

Steps

  1. In the SITE123 editor, open Pages and add or open a Custom Code page
  2. Click inside the code area and paste the RentalBeam map iframe snippet
  3. Set Custom Height to match the aspect ratio you chose in the Map section
  4. Save, publish, and check the map on the live site
The Address & pin card in a rental's Details: an address search field and a map with a draggable pin
Save the rental's location on its Details page first.

Before you publish

  • Custom code needs a SITE123 premium plan.
  • Place the map near your address or directions so guests find it naturally.
  • Check the live site after any change to the map's look.

The iframe snippet looks like this

html
<style>@media(max-width:600px){.rentalbeam-map-frame{min-height:min(78vh,640px);min-height:min(78svh,640px)}}</style>
<iframe class="rentalbeam-map-frame" src="https://rentalbeam.com/embed/map/your-rental-id" title="Rental location map" loading="lazy" allow="fullscreen" style="width:100%;aspect-ratio:16/9;min-height:320px;border:0;border-radius:12px;display:block;"></iframe>

SITE123 keeps custom code at the height you set, so the iframe snippet at a height matching your chosen aspect ratio shows the map cleanly.

Troubleshooting

If a widget does not show on SITE123. It goes in a Custom Code page. Then check these, in order.

  1. Publish the page and check the live address, not only the editor preview.
  2. Open the page in a private window to rule out a cached copy.
  3. Check that your RentalBeam calendar already shows the right booked dates before you look at the page.
  4. Send one test booking request from the live page and confirm the email reaches you.

SITE123 questions.

Can I use RentalBeam on SITE123?

Yes. The availability calendar, the booking form and the map all paste into a Custom Code page on SITE123, and they work alongside your Airbnb, Vrbo or Booking.com listings instead of replacing them.

Should I use a script or iframe on SITE123?

SITE123 shows custom code at a fixed height that you set with a slider, so it cannot grow with the calendar. The iframe snippet fills that space predictably. In practice, iframe is the best default for SITE123.

Will this sync with Airbnb, Vrbo, and Booking.com?

Yes. RentalBeam supports any iCal URL, so you can import Airbnb, Vrbo, Booking.com, Google Calendar, and other compatible sources. The booking form reads the same calendar, so guests never see dates that are already booked elsewhere.

Do I need a property management system?

No. RentalBeam is for hosts who want synced availability and direct-booking tools without paying for a full PMS stack.

Does RentalBeam take a commission or booking fee on guest card payments?

RentalBeam Pro is a single direct-booking plan with no commission and no booking fee. It adds the booking form widget, guest-payment workflow, coupon codes, seasonal pricing, custom fields, booking rules, host email tools, and reply-from-inbox guest messaging. RentalBeam never takes a cut of your booking revenue. When a guest chooses to pay by card through RentalBeam, the only deduction is the standard Stripe card-processing fee, which is paid to Stripe - not RentalBeam. Inquiry, pay-later, and off-platform bookings (such as bank transfer) carry no per-transaction cost at all.

Which plan do I need?

The availability calendar works on every plan, including Free. The booking form needs Pro. Every plan can build and preview a map in a rental's Map section; showing it on your own website needs Plus or Pro.

Can I show an approximate area instead of my exact address?

Yes. Each rental's Details page lets you choose exact-pin mode or approximate-area mode. Approximate mode shows guests a shaded circle instead of your exact coordinates, and nearby highlights are withheld.

Put your calendar on SITE123

Free to start. Copy the website code, paste it in, and publish.

Compare plans