Skip to content

Booking Widget

Advanced Widget Usage

Slot holds, payment redirects, fallback behavior, and multiple widgets.

Slot Holds

When a client selects a time slot, the widget places a hold:

  • The hold reserves the slot for 10 minutes
  • A countdown timer is displayed on the details and confirmation steps
  • If the hold expires, the client sees an error and must select a new time
  • Holds prevent double bookings — two clients cannot hold the same slot

Stripe Payment Redirect

If the service requires a deposit, the widget redirects to Stripe's hosted payment page after confirmation:

  1. Client confirms booking details
  2. Client is redirected to a secure Stripe payment page
  3. After payment, client returns to the widget with a success confirmation

The widget handles the redirect seamlessly — no booking data is lost during the process.

Fallback Behavior

If the widget script fails to load (network error, ad blocker, etc.), the widget element renders a simple "Book Now" link pointing to the business's hosted booking page:

https://calendence.com/book/{business-slug}

This ensures clients always have a way to book, even without JavaScript.

Multiple Widgets

Multiple widgets on the same page operate independently:

<!-- Each has its own session and state -->
<calendence-widget key="cal_pub_xxx" service-id="service-1"></calendence-widget>
<calendence-widget key="cal_pub_xxx" service-id="service-2"></calendence-widget>

Each widget creates its own session and manages its own booking flow.