Framer integration
Add a booking calendar to Framer
To add a booking calendar to Framer, copy your website code from RentalBeam and paste the script snippet into an Embed component. 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.
Availability calendar
Paste the calendar into Framer. Free on every plan. Use the script snippet in an Embed component.
What you need
- A Framer page you can edit
- Your RentalBeam calendar widget
- At least one connected OTA or iCal availability source such as Airbnb or Vrbo
Steps
- Open the page in the Framer editor
- From the Insert menu, search for Embed and drag the Embed component onto the canvas where the calendar should sit
- In the component properties, switch Type to HTML and paste the RentalBeam script embed - both the script tag and the calendar div
- Size the component width to your column, leave the height on auto, then publish and confirm on the live site
Before you publish
- Use the Embed component for the widget. Project Settings, then Custom Code, is for head and body scripts such as analytics, not for something guests need to see.
- Embeds may not fully render on the editor canvas. Publish and open the live URL before assuming the embed failed.
- If a script is ever stripped, set the same component's Type to URL and paste the iframe snippet instead.
Where to put it
- Place the Embed component next to your booking or inquiry button so guests can act right after checking dates.
- Give the component the full column width and leave the height on auto so the month grid is not squeezed on mobile.
- If the calendar does not appear on the editor canvas, publish and open the live site. Embeds may not fully render while you are designing.
The script snippet looks like this
<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>Framer's Embed component runs scripts on the published site, so the script embed keeps the calendar responsive at the width you give the component. Embeds may not fully render on the editor canvas, so you confirm the result on the published URL.
Booking form
Take booking requests on Framer. On Pro. Guests pick dates, see the price and send a request.
Steps
- Open the page where guests should submit booking requests
- From the Insert menu, search for Embed and drag the Embed component where the form should appear
- Switch the component Type to HTML and paste the RentalBeam booking widget script embed - both the script tag and the booking div
- Size the component to the column width, leave the height on auto, publish, then submit a test inquiry on the live site
Before you publish
- Give the component the full column width and leave the height on auto so the form has room to grow on mobile.
- Run your test inquiry on the published URL. The canvas may not render the embed, and a blank canvas is not a broken form.
- Project Settings, then Custom Code, is for head and body scripts such as analytics. The booking form belongs in an Embed component on the page.
Where to put it
- Give the Embed component the full column width and leave the height on auto so the fields have room to grow on mobile.
- Always run your test inquiry on the published URL, since embeds may not fully render on the editor canvas.
- Booking settings you change in RentalBeam update the live widget automatically. Once the code is pasted, Framer never needs another edit.
The script snippet looks like this
<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>Framer's Embed component runs the booking form script on the published site, which keeps the best loading and mobile behavior. Embeds may not fully render on the editor canvas, so you confirm the form on the published URL.
Map
Show where your rental is on Framer. On your own website with Plus or Pro. Exact pin or approximate area.
Steps
- Open the page where guests should see your rental's location
- From the Insert menu, search for Embed and drag the Embed component onto the canvas
- Switch the component Type to HTML and paste the RentalBeam map embed
- Size the component to match your chosen aspect ratio, then publish and confirm on the live site
Before you publish
- Match the component proportions to the aspect ratio you picked in the Map section (wide, standard, or square) so the map is not cropped.
- Embeds may not fully render on the editor canvas. Check the published URL before assuming the embed failed.
- If a script is ever stripped, set the same component's Type to URL and paste the iframe snippet instead.
The script snippet looks like this
<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script>
<div class="rentalbeam-map" data-rental-id="your-rental-id"></div>Framer's Embed component runs scripts on the published site, so the map keeps the theme and aspect ratio you chose in the Map section.
Troubleshooting
If a widget does not show on Framer. It goes in an Embed component. Then check these, in order.
Why the widget might not show on the canvas
Framer does not always run an embed while you design, so the component can look empty. Publish the site and open the live address in a normal browser tab; the widget renders there.
If a script is ever stripped
Switch the same Embed component's Type from HTML to URL and paste the iframe snippet. It renders without JavaScript and stays apart from your page styles.
- Publish the page and check the live address, not only the editor preview.
- Open the page in a private window to rule out a cached copy.
- Check that your RentalBeam calendar already shows the right booked dates before you look at the page.
- Send one test booking request from the live page and confirm the email reaches you.
Related guides. The same widgets, in more depth.
Framer questions.
Can I use RentalBeam on Framer?
Yes. The availability calendar, the booking form and the map all paste into an Embed component on Framer, and they work alongside your Airbnb, Vrbo or Booking.com listings instead of replacing them.
Should I use a script or iframe on Framer?
Framer's Embed component runs scripts on the published site, so the script embed keeps the calendar responsive at the width you give the component. Embeds may not fully render on the editor canvas, so you confirm the result on the published URL. In practice, script is the best default for Framer.
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 Framer
Free to start. Copy the website code, paste it in, and publish.