Bookingkit widget 3.0

Appearance

Widget configuration ​

Trigger style ​

The style property is optional, but if you want to customize the look of the floating button, you can provide the following properties:

Position ​

The position property accepts the following values:

ts
type WidgetStylePosition = "bottom-left" | "bottom-right" | "top-left" | "top-right" | "center-left" | "center-right";

Ad example, to set the button to the bottom right of the screen, you can provide the following configuration:

html
<bk-floating-widget
        data-trigger='{"position": "bottom-right"}'
     ...

Icon ​

The icon property accepts the following values:

ts
type Icon = "ticket" | "shopping-bag" | false;

Ad example, to do not show any icon in the button:

html
<bk-floating-widget
        data-trigger='{"position": "top-right", "icon": "shopping-bag"}'
     ...

Label ​

The label property accepts the following values:

ts
type Icon = string | false | true;

Widget style ​

The widget style property is optional, but if you want to customize the look of the widget modal, you can provide the following properties:

Theme ​

The theme property accepts the following values:

ts
type Theme = "dark" | "light";

Ad example, to set the button and widget modal theme to dark:

html
<bk-floating-widget
        data-widget-style='{"theme": "dark"}'
     ...

Display settings ​

The display settings property is optional and controls what optional information the widget shows while a customer picks a date and a time. Every option is off by default, so a widget that does not set data-display-settings renders exactly as it always has.

Display settings apply to both the floating widget and the book now element.

Appointment list ​

The appointment list is the list of bookable times for the selected day. It accepts the following properties:

ts
type AppointmentList = {
    showCapacity?: boolean, // default: false
};
  • showCapacity — each bookable appointment shows the places remaining, coloured by its capacity tier, with a matching strip beneath it. Sold-out appointments are excluded from the colour scale and read "Sold out".

As an example, to show the remaining places on each appointment:

html
<bk-floating-widget
        data-display-settings='{"appointmentList": {"showCapacity": true}}'
     ...

Calendar ​

The calendar is the surface on which a customer picks a day. Each day can show one piece of information in addition to its day number:

ts
type ShowPerDay = "capacity" | false;
  • "capacity" — the day will show its remaining places, coloured by capacity tier
  • false — the day number only, and the default

As an example, to colour the calendar by remaining availability:

html
<bk-floating-widget
        data-display-settings='{"calendar": {"showPerDay": "capacity"}}'
     ...

Combining both ​

data-display-settings is a single JSON object, so set both surfaces together:

html
<bk-floating-widget
        data-display-settings='{"appointmentList": {"showCapacity": true}, "calendar": {"showPerDay": "capacity"}}'
     ...

Any property you leave out falls back to its default, at every level. A value outside the accepted vocabulary is ignored in favour of the default, and a malformed data-display-settings attribute leaves the widget on its defaults rather than failing.