Zaptime Docs

Appearance

Working with Time Slots ​

By default the whole booking for a selected time slot is handled inside the calendar: the visitor picks a slot, fills the built-in form and receives a confirmation.

Set externalBooking: true in the config to take over that step. The calendar then stops at the time slot selection and you submit the booking yourself, for example from a form that already exists on your page.

html
<script>
  Zaptime({
    config: {
      token: "YOUR_TOKEN",
      externalBooking: true,
    },
  }).render("#zaptime-container");
</script>

TIP

With the npm packages you get full control over the flow, typed responses and error handling. See Working with Time Slots in Vue or the headless API.

ZaptimePlugin API ​

The script exposes window.ZaptimePlugin, which forwards booking actions into the currently visible calendar iframe.

Book ​

Books the selected time slot immediately.

ts
window.ZaptimePlugin.book({
  email: string,
  firstName?: string,
  lastName?: string,
  phone?: string,
  seats?: number, // defaults to 1
  customFields?: { uuid: string; value: string | number | boolean | string[] }[],
  calendarId?: string,
});

Reserve ​

Holds the selected time slot. A reservation is refreshed automatically while the page stays open and must be confirmed to become a booking.

ts
window.ZaptimePlugin.reserve({
  email: string,
  firstName?: string,
  lastName?: string,
  phone?: string,
  seats?: number,
  customFields?: CustomFieldCollected[],
  calendarId?: string,
});

Confirm ​

Confirms a previously reserved time slot.

ts
window.ZaptimePlugin.confirm({ calendarId?: string });

Cancel ​

Cancels a previously reserved time slot.

ts
window.ZaptimePlugin.cancel({ calendarId?: string });

The ZaptimePlugin methods are fire-and-forget: they post a message to the iframe and do not return the API response. When you need the response (reservation UUID, validation result, slot-taken errors) use the npm packages instead.

Custom field UUIDs come from the booking form of the event type in the dashboard. See Custom Fields.