Skip to content

Booking Widget

Widget Attributes

All available attributes for the calendence-widget element.

Attribute Reference

Attribute Type Default Description
key string required Your publishable API key (cal_pub_...)
theme string auto Color theme: auto, light, or dark
display string inline Display mode: inline or popup
button-class string — Custom CSS classes for the popup trigger button
service-id string — Pre-select a specific service by UUID
location-id string — Pre-select a specific location by UUID
lang string en Language code

key

Required. Your widget publishable API key. Get it from the Hub Panel under API Keys.

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

Publishable keys are safe to expose in HTML. They can only initiate booking sessions.

theme

Controls the widget's color scheme. Defaults to auto.

<!-- Follow OS/host page preference -->
<calendence-widget key="..." theme="auto"></calendence-widget>

<!-- Always light -->
<calendence-widget key="..." theme="light"></calendence-widget>

<!-- Always dark -->
<calendence-widget key="..." theme="dark"></calendence-widget>

In auto mode, the widget detects:

  1. The host page's dark class on <html> (for Tailwind/Alpine dark mode)
  2. The OS prefers-color-scheme media query

The widget updates in real-time if the user toggles dark mode.

display

Controls how the widget renders. Defaults to inline.

  • inline — Renders the full booking UI directly on the page (current behavior)
  • popup — Renders a trigger button. Clicking opens a modal overlay with the booking flow.
<!-- Inline (default) -->
<calendence-widget key="..." theme="auto"></calendence-widget>

<!-- Popup with custom button text -->
<calendence-widget key="..." service-id="uuid" display="popup">Book Now</calendence-widget>

In popup mode, the session token is created lazily — only when the user clicks the trigger button, not on page load. This avoids unnecessary API calls on pages with multiple popup buttons.

The element's text content becomes the trigger button label. If empty, defaults to "Book Now".

button-class

Custom CSS classes for the popup trigger button. Only applies when display="popup".

<!-- Use your own button styles -->
<calendence-widget
  key="..."
  service-id="uuid"
  display="popup"
  button-class="bg-red-600 text-white px-8 py-4 rounded-full text-lg"
>Schedule Your Detail</calendence-widget>

If not provided, the widget renders its own styled button using the brand color.

service-id

Pre-selects a specific service, skipping the service selection step:

<calendence-widget
  key="..."
  service-id="01950000-de00-4000-a000-000000000030"
></calendence-widget>

Useful for landing pages or pages dedicated to a single service.

location-id

Filters availability to a specific location:

<calendence-widget
  key="..."
  location-id="01950000-de00-4000-a000-000000000003"
></calendence-widget>

Dynamic Attribute Changes

You can change attributes at runtime and the widget will react:

const widget = document.querySelector('calendence-widget');

// Switch to dark mode
widget.setAttribute('theme', 'dark');

// Pre-select a different service
widget.setAttribute('service-id', 'new-service-uuid');