Booking calendar

Put your booking product's calendar straight into your page:

<script src="https://paylead.app/embed.js" async></script>

<div data-paylead-booking="k3x9pa"></div>

The client picks a day, then a time, and taps Book now. The checkout opens over your page with that time already in the cart, so all they do is enter their details and pay.

It uses everything you set on the booking product: your weekly hours, days off, buffer times, how much notice you need, how far ahead people can book, and whether they pay in full, pay a deposit or pay in person. Times show in the client's own timezone.

A time is held while the client pays. If someone else takes it first, the client is asked to pick another one.

Styling

The calendar takes the same attributes as product cards (see Styling):

<div
  data-paylead-booking="k3x9pa"
  data-paylead-accent="#0b2c2e"
  data-paylead-radius="large"
  data-paylead-button-text="Book my session"
></div>

The accent colour is used for the chosen day and time and for the button. The calendar grows to fit, so you don't need to set a height.

Without the script

On site builders that block scripts, use an iframe:

<iframe
  src="https://paylead.app/embed/book/k3x9pa"
  style="width:100%;max-width:420px;height:680px;border:0"
  loading="lazy"
  title="Book a time"
></iframe>

In a plain iframe, Book now opens your product page in a new tab with the time already picked.

From your own code

Paylead.booking('#calendar', 'k3x9pa', { theme: { accent: '#0b2c2e' } });

Paylead.on('paid', (detail) => {
  console.log('Booked and paid', detail.order_number);
});

Other ways to sell bookings

A Buy button with a booking product's code opens the product page over your site, and the client picks the time there. Use it when you'd rather keep the calendar off your page.