Install guide
Add online booking to Vercel, Next.js and React
Put your booking form on a site you deploy yourself, on Vercel or anywhere else: Next.js, React, Astro or plain HTML.
Use: Embed code
You control the markup, and the embed needs no script. Use the inline script only if you want the form without a frame.
Steps
- 1Open the page file where the form should go, for example app/book/page.tsx or index.html.
- 2Paste the embed code below. In JSX, change frameborder to frameBorder and turn the style string into a style object.
- 3Commit and push. Vercel builds and deploys it.
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
- The raw HTML string will not compile as JSX until frameBorder and the style object are fixed.
- If you set a Content-Security-Policy, allow https://book.autorev.ai in frame-src, and https://app.autorev.ai in script-src for the inline script.
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.
