Skip to content

Booking Widget

Embedding the Widget

Add the Calendence booking widget to your website with a single line of code.

Basic Setup

The Calendence booking widget is a Web Component that embeds on any website. It runs in a Shadow DOM — no CSS conflicts, no JavaScript conflicts with your existing site.

Add the script tag and custom element to your page:

<script src="https://widget.calendence.com/widget.js" defer></script>

<calendence-widget
  key="cal_pub_your_publishable_key"
></calendence-widget>

The widget handles the entire booking flow: service selection, staff selection, date/time picking, client details, and confirmation.

Getting Your Publishable Key

  1. Log in to the Hub Panel at /hub
  2. Navigate to API Keys
  3. Create a new Widget key
  4. Copy the publishable key (starts with cal_pub_)

Important: Publishable keys are safe to expose in your HTML. They can only initiate booking sessions — they cannot read or modify business data.

Placement

Place the widget element wherever you want the booking interface to appear:

<div class="my-booking-section">
  <h2>Book an Appointment</h2>
  <calendence-widget
    key="cal_pub_your_publishable_key"
    theme="auto"
  ></calendence-widget>
</div>

The widget is responsive by default. It adapts its layout to the available width, so it works in sidebars, modals, and full-width sections equally well.

Popup Mode

If you have dedicated service pages on your website, use popup mode to add a "Book Now" button that opens the booking flow in a modal:

<calendence-widget
  key="cal_pub_xxx"
  service-id="full-detail-uuid"
  display="popup"
>Book Full Detail</calendence-widget>

The element's text content becomes the button label. When clicked, a modal opens with the booking flow starting at the right step — skipping service selection since the service is already chosen.

Service Pages Pattern

Place a popup widget on each service page:

<!-- /services/express-wash -->
<calendence-widget key="cal_pub_xxx" service-id="express-wash-uuid" display="popup">
  Book Express Wash — $35
</calendence-widget>

<!-- /services/full-detail -->
<calendence-widget key="cal_pub_xxx" service-id="full-detail-uuid" display="popup">
  Book Full Detail — $299
</calendence-widget>

Custom Button Styling

Override the default button style with your own CSS classes:

<calendence-widget
  key="cal_pub_xxx"
  service-id="uuid"
  display="popup"
  button-class="my-custom-btn"
>Book Now</calendence-widget>

The button-class attribute replaces the widget's default button styles entirely.