Zaptime Docs

Appearance

Working with Time Slots ​

When using externalBooking: true inside config you handle your booking by yourself using helpful functions exported by the NPM package.

This is especially useful when you want to control the flow of the bookings. For example, let's say you want to reserve a time slot inside your built-in calendar integration, and confirm the reservation after the form is successfully handled.

vue
<template>
  <ZaptimeCalendar :config="config" />
</template>

<script setup lang="ts">
import { ZaptimeCalendar, book, reserve, confirm, cancel } from "@zaptime/vue3";
import type { ZaptimeConfig } from "@zaptime/vue3";

const config: ZaptimeConfig = {
  token: "<API_TOKEN>",
};
</script>

<style>
@import url("/node_modules/@zaptime/vue3/dist/style.css");
</style>

Book ​

When called time slot is immediately booked.

ts
book({
    email: string,
    firstName?: string,
    lastName?: string,
    phone?: string
    calendarId?: string
    seats?: number, // Defaults to 1
    customFields?: CustomFieldCollected[]
 }): Promise<void>

Reserve ​

Makes a reservation for 5 minutes to selected time slot. Needs to be confirmed.

ts
reserve({
  email: string,
  firstName?: string,
  lastName?: string,
  phone?: string
  calendarId?: string
  seats?: number, // Defaults to 1
  customFields?: CustomFieldCollected[]
}): Promise<void>

Confirm ​

Confirms previously reserved time slot.

ts
confirm({
  calendarId?: string,
  firstName?: string,
  lastName?: string,
  phone?: string,
  customFields?: CustomFieldCollected[]
}): Promise<void>

Cancel ​

Cancels previously reserved time slot.

ts
cancel(calendarId?: string): Promise<void>