Skip to content

Booking Widget

Embedding the Widget

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

Basic Setup

Add two lines to your website to get a fully functional booking form. It works on any website — WordPress, Squarespace, Wix, custom HTML, anything.

<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 Key

  1. Go to Account → Widget in your dashboard
  2. Your embed code with your key is shown — just copy and paste it

Safe to share: Your widget key only lets people book with you. It can't access your 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.