Install guide
Add online booking to Lovable
Put your booking form in an app built with Lovable.
Use: Embed code
Lovable builds a React app. The embed needs no extra packages, and pasting it into the chat is the fastest way in.
Steps
- 1Open your Lovable project and go to the page where the form should go.
- 2In the chat, ask Lovable to embed this booking form and paste the code below inside a code block.
- 3Or add it in the code view yourself, with frameBorder and a style object like any JSX.
- 4Preview the app, then publish.
The code
Swap <your-business> for your booking name. Or skip that: your code, already filled in, is in the AutoRev app under Settings > Booking.
Embed code
<iframe src="https://book.autorev.ai/<your-business>" width="100%" height="780" frameborder="0" style="border:0;max-width:640px;" title="Book a service" ></iframe>
Book Now button
Want a button instead of the whole form? This opens the form in a pop-up.
<a href="https://book.autorev.ai/<your-business>" data-autorev-booking>Book Now</a> <script src="https://app.autorev.ai/booking-widget.js" async data-slug="<your-business>" data-mode="popup"></script>
Booking link
For a plain button or menu item that links out.
https://book.autorev.ai/<your-business>
Good to know
- Put the snippet in a code block in the chat so Lovable treats it as markup.
- If the published app sets a Content-Security-Policy, allow https://book.autorev.ai in frame-src.
Not on AutoRev yet?
Your customers pick what's broken, pick an arrival window, and the job lands in ServiceTitan, Housecall Pro or AutoRev. Try AutoRev online booking.
