Weebly integration

Add a booking calendar to Weebly

To add a booking calendar to Weebly, copy your website code from RentalBeam and paste the script snippet into an Embed Code element. 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 Weebly. Free on every plan. Use the script snippet in an Embed Code element.

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 Weebly page you can edit
  • Your RentalBeam calendar widget
  • At least one connected OTA or iCal availability source such as Airbnb or Vrbo

Steps

  1. In the Weebly editor, open the page where guests check availability
  2. From the Build panel on the left, drag an Embed Code element onto the page
  3. Click the element, choose Edit Custom HTML, and paste the RentalBeam script embed - both the script tag and the calendar div
  4. Publish the site, then open the live page to confirm the calendar (Weebly does not preview embedded scripts in the editor)

Before you publish

  • Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
  • Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
  • If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript. Advanced: place the script in Settings, then SEO, then Footer Code, and keep only the calendar div in the Embed Code element.

Where to put it

  • Drag the Embed Code element near your booking or inquiry button so guests can act right after checking dates.
  • If the calendar does not show in the Weebly editor, publish the site and check the live page: that is normal Weebly behavior, not a broken embed.
  • Give the embed its own row so Weebly columns do not squeeze the month grid on mobile.

The script snippet looks like this

html
<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script>
<div class="rentalbeam-calendar" data-rental-id="your-rental-id" data-rb-reserved style="min-height: 386px;"></div>

Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the calendar responsive with no fixed height - the closest match to the native RentalBeam look. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page.

Booking form

Take booking requests on Weebly. 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. Edit the page where guests should submit booking requests
  2. Drag an Embed Code element onto the page from the Build panel
  3. Choose Edit Custom HTML and paste the RentalBeam booking widget script embed - both the script tag and the booking div
  4. Publish, then submit a test inquiry on the live page using desktop and mobile

Before you publish

  • Keep the booking form in its own row or section so Weebly columns do not squeeze the fields.
  • Always test on the published URL, not the editor preview, since Weebly does not render embedded scripts while you are editing.
  • If your plan strips scripts, use the iframe snippet instead. Advanced: load the script through Settings, then SEO, then Footer Code, and keep only the booking div in the Embed Code element.

Where to put it

  • Keep the booking form in its own Weebly row or section so columns do not squeeze the fields.
  • Always run your test inquiry on the published URL, not the editor preview, since Weebly often hides embedded code while you are editing.
  • Booking settings you change in RentalBeam update the live widget automatically: once the code is pasted, Weebly never needs another edit.

The script snippet looks like this

html
<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script>
<div class="rentalbeam-booking-form" data-rental-id="your-rental-id" data-rb-reserved style="width: 100%; max-width: min(100%, 840px); margin: 0 auto; min-height: 160px;"></div>

Weebly's Embed Code element accepts custom JavaScript, so the booking widget script works and keeps the best loading and mobile behavior. Weebly does not preview embedded scripts in the editor, so you confirm the form on the published page.

Map

Show where your rental is on Weebly. 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 Weebly editor, open the page where guests should see your rental's location
  2. From the Build panel on the left, drag an Embed Code element onto the page
  3. Click the element, choose Edit Custom HTML, and paste the RentalBeam map embed - both the script tag and the map div
  4. Publish the site, then open the live page to confirm the map (Weebly does not preview embedded scripts in the editor)
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

  • Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
  • Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
  • If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript.

Where to put it

  • Drag the Embed Code element near your address or nearby-attractions copy.
  • If the map does not show in the Weebly editor, publish the site and check the live page: that is normal Weebly behavior, not a broken embed.
  • Give the embed its own row so Weebly columns do not squeeze the map on mobile.

The script snippet looks like this

html
<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script>
<div class="rentalbeam-map" data-rental-id="your-rental-id"></div>

Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the map responsive with no fixed height. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page.

Troubleshooting

If a widget does not show on Weebly. It goes in an Embed Code element. Then check these, in order.

Why the widget might not show in the editor

Weebly does not run embedded scripts while you edit, so the Embed Code element can look empty. Publish the site and open the live page in a normal browser tab; the widget renders there.

If your plan or theme strips the script

Use the iframe snippet: it renders without JavaScript and stays apart from your page styles. You can also keep the widget's div in the Embed Code element and load the script site-wide under Settings, then SEO, then the Footer Code box.

  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.

Weebly questions.

Can I use RentalBeam on Weebly?

Yes. The availability calendar, the booking form and the map all paste into an Embed Code element on Weebly, and they work alongside your Airbnb, Vrbo or Booking.com listings instead of replacing them.

Should I use a script or iframe on Weebly?

Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the calendar responsive with no fixed height - the closest match to the native RentalBeam look. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page. In practice, script is the best default for Weebly.

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 Weebly

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

Compare plans