Install
Booking widget on Lovable and other AI builders
An AI builder will happily build its own booking form. Tell it not to. The widget is the booking form, and the rules below keep the builder from working around it.
The snippet
<div id="rentalcal-widget" data-property-id="YOUR_PROPERTY_ID"></div> <script src="https://widget.rentalcal.com/widget.js" async></script>
Replace YOUR_PROPERTY_ID with your property's id. It is on the property's Widget tab in your dashboard, where the snippet is already filled in and ready to copy.
Steps
Ask Lovable to add a booking component where the card belongs that always renders the RentalCal div, and loads widget.js once after it mounts. Not in index.html: React replaces everything inside #root.
Tell it not to build its own booking form, calendar or price list. The RentalCal card is all of that.
Publish to your lovable.app address or your own domain. Preview links are temporary and will not confirm.
Paste the published page's address on the property's Widget tab to confirm the install.
Each property has a builder kit at www.rentalcal.com/build/ followed by the property's id (the long code in its dashboard address). It writes this prompt for you, with the facts and photos Lovable should use.
If something looks off
- Ask for a booking component that always renders the RentalCal div and loads widget.js once after it mounts. Not in index.html: React replaces everything inside #root.
- Lovable preview links (the ones with a long id) change on every build. Publish, then confirm the published address.
- Each property has a builder kit at www.rentalcal.com/build/ followed by the property's id, the long code in its dashboard address. It gives Lovable the facts, the photos and these rules in one prompt.
Confirming the install
Once the page is live, paste its address on the property's Widget tab. RentalCal opens the page, finds the embed code and marks the widget confirmed. Booking assistants can then find the property by that address too.