Help Center / How-to guides and use cases /
How to embed a booking page on your website
Plutio booking pages can be embedded on external websites so visitors schedule appointments directly from the page without being redirected. The embedded view shows real-time availability based on your calendar settings and connected calendars, and payments can be collected at the time of booking if a payment provider is connected.
- Open the booking page. The scheduler section is in the main menu. The booking page to be embedded should be opened by clicking on it. If no booking page exists yet, one can be created by clicking + New booking page and configuring availability windows, appointment duration, and buffer times between slots.
- Copy the embed code. Inside the booking page settings, the Share button reveals sharing options. The Embed tab provides an HTML snippet that loads the booking interface inside an iframe. Clicking Copy places the code on the clipboard.
- Add the code to the website. The embed snippet should be pasted into an HTML block or custom code element on the target webpage. Most website builders (WordPress, Squarespace, Wix) support custom HTML sections where the snippet can be placed. The booking calendar renders within the iframe at whatever size the container allows.
- Adjust the display size. The
widthandheightattributes in the embed code can be modified to fit the page layout. Setting width to100%makes the booking page span its container. The height should be generous enough to show the calendar grid and available time slots comfortably, because a cramped iframe forces visitors to scroll inside the embed just to pick a time.
How availability is displayed
The embedded booking page shows a calendar view where available dates are highlighted and unavailable dates are greyed out. Availability is calculated from the booking page's schedule settings (the days and hours configured as bookable) and blocked by events from any connected calendars like Google Calendar. Real-time availability means that a slot booked by one visitor is immediately removed for the next, so double-bookings don't happen even when multiple people are viewing the page at the same time. Buffer times between appointments and daily booking limits are also respected automatically, which prevents back-to-back scheduling if gaps have been configured.
Collecting payments during booking
If payment collection is enabled on the booking page, visitors are prompted to pay as part of the booking process. A payment provider like Stripe can be connected through Settings > Integrations. Once connected, a payment step appears after the visitor selects a time slot and enters their details. The payment amount is configured in the booking page settings and can be a fixed fee or a deposit toward the full service cost. Booking confirmations are only sent after successful payment, which reduces no-shows and ensures commitment at the point of scheduling.
