BookingMachine for Webflow
Add Online Booking to Your Webflow Site
Drop a Code Embed element where the booking form should go and paste in one line. Your Webflow page then shows your services, live prices and calendar, and takes the booking and the deposit.
Add the booking widget to a Webflow page
Webflow runs custom code on paid site plans and paid Workspaces. On a free site, use the button method further down.
Copy your embed code
In your BookingMachine dashboard, open the Widget page and copy the embed code. It is a single line.
Add a Code Embed element
In the Webflow Designer, open the Add panel and drag a Code Embed element to where the booking form should sit.
Paste the code
Paste the embed code into the editor that opens, then save and close.
Publish
Custom code does not run on the Designer canvas. Publish the site and open the live page to see the widget.
What the embed code looks like
<script src="https://bookingmachine.io/embed.js" data-business="your-business" async></script>
Yours has your own business name in it. Copy it from the Widget page in your dashboard rather than from here.
A Book Now button on every page
To show a floating Book Now button across the site, open Site settings, go to Custom code, and paste the floating version of the code into the Footer code field. Publish for it to take effect.
Floating button code
<script src="https://bookingmachine.io/embed.js" data-business="your-business" data-mode="floating" async></script>
On a free Webflow site?
Add a Button element, label it Book Now and set its link to your BookingMachine booking link. Customers book on your hosted booking page. No custom code is involved, so it works on any plan.
Webflow Booking Questions
Why is the widget blank in the Webflow Designer?
Webflow does not run scripts on the canvas, so a Code Embed shows a placeholder. Publish the site, or use the preview on your published staging domain, to see the live widget.
Can I style the widget with Webflow classes?
No, and that is deliberate. The widget is isolated from the page so your site styles cannot break it. Set its colour and button style in the BookingMachine dashboard instead.
Can I use it inside a CMS collection page?
Yes. Add the Code Embed to the collection page template and it appears on every item. If each item needs its own widget, bind the widget name in the code to a CMS field.
Does it work with Webflow Ecommerce?
Yes. Booking payments are taken by the widget through Stripe, separately from Webflow Ecommerce orders, so you can run both on the same site.
On a different website builder?
Take bookings on your Webflow site today
Set up your services and prices, copy one line of code, and customers can book and pay on your own website.