How to accept direct bookings on your Framer vacation rental website
Framer can publish a real booking form without a full PMS or a separate form builder. Framer's Embed component runs scripts on the published site, so the recommended setup drags in an Embed component, sets its Type to HTML, and pastes the RentalBeam booking widget script next to your availability calendar. You decide whether guests submit an inquiry, get billed after host approval by bank transfer, cash, or a secure card payment link, or pay inline with Stripe Connect - all with no commission and no RentalBeam booking fee on your direct bookings.
Why add a direct-booking form to your Framer site?
Guests who reach your own website are your highest-intent traffic. Letting them request or book a stay without leaving the page, and without paying an OTA service fee, is the most underused conversion lever in vacation rentals. A direct-booking form on Framer turns the page from a brochure into a booking surface.
- Take booking requests directly from your own website
- Keep Airbnb, VRBO, and Booking.com synced so the form never sells double-booked dates
- Offer coupon codes, seasonal pricing, custom fields, and booking rules
- Choose between inquiry-only, bill later by bank transfer, cash, or a card link, or inline Stripe Connect card payment
- Zero RentalBeam commission on direct bookings - hosts keep 100% of their booking revenue
What you need
- A Framer page you can edit
- A RentalBeam Pro plan with a booking-ready calendar
- At least one connected OTA or iCal availability source
Pro plan required
The booking widget is part of RentalBeam Pro, which takes no commission and no RentalBeam booking fee on your direct bookings. When a guest pays by card, only the standard Stripe card-processing fee applies, paid to Stripe rather than RentalBeam.Setup steps
- 1
Create a booking-ready RentalBeam calendar
- Open your RentalBeam dashboard and create or open a calendar.
- Connect at least one iCal source (Airbnb, VRBO, Booking.com, Google Calendar) so the booking widget never offers double-booked dates.
- Set your nightly pricing, optional seasonal rules, minimum stay, advance notice, and prep time.
- Decide whether bookings should be inquiry-only, host-reviewed and billed later by bank transfer, cash, or a card link, or paid inline with Stripe Connect.
Choose payment flow at any time
You can start with inquiry-only or pay-later requests today and switch to inline card payments later without rebuilding the page. The widget URL stays the same. - 2
Copy the right booking widget embed for Framer
RentalBeam recommends the script embed for Framer. Use the matching code format below as your reference.
html<script src="https://cdn.rentalbeam.com/v1/embed.js" async></script> <div class="rentalbeam-booking-form" data-rental-id="your-calendar-id"></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.
Framer publishing reminders
- 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.
- 3
Paste the booking widget into Framer
Builder-specific install steps
Use these steps to place the RentalBeam booking widget exactly where guests are ready to book.
Recommended: ScriptFramer
Drop in an Embed component set to HTML and paste the script snippet; check the published site, not the canvas.
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.
Use the Script tab for this builder.
- 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.
- 4
Publish and submit one live test inquiry
Where to place the booking widget on the page
- 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.
Treat the booking form as the page's primary CTA
High-converting direct-booking pages put the booking form directly next to or under the availability calendar so guests can check dates and request a stay in a single visual area.No commission on your direct bookings
RentalBeam Pro takes no commission and adds no RentalBeam booking fee on your direct bookings - your booking revenue is 100% yours. When a guest pays by card through RentalBeam, the only deduction is the standard Stripe card-processing fee, which is paid to Stripe, not RentalBeam.
- No commission - RentalBeam never takes a cut of your booking revenue.
- No RentalBeam booking or application fee on guest card payments.
- Card payments carry only the standard Stripe card-processing fee; inquiry-only and pay-later bookings have no per-transaction cost.