@ordinatio/booking-widget

The public booking widget for @ordinatio/scheduling-api: a visitor picks a service, a day and a time, enters their details, and books. It talks only to the scheduling API.

On any website: one script

Serve dist/embed.global.js from your site (the starter app serves it at /widget.js), then:

<div id="booking-widget"></div>
<script src="/widget.js"></script>
<script>
  OrdinatioBooking.init('#booking-widget', { calendarSlug: 'front-desk', apiBaseUrl: '' });
</script>

apiBaseUrl is where the scheduling API is served from (empty for the same site). Use typeSlug instead of calendarSlug to book with whoever on the team is free, and orgSlug if your server hosts several organizations.

In a React app

import { BookingWidget } from '@ordinatio/booking-widget';

<BookingWidget calendarSlug="front-desk" apiBaseUrl="" onBooked={(appointment) => console.log(appointment)} />;

Options include colorScheme ('light' or 'dark'), theme (colours, radius, font), onBooked, onError and confirmationMessage. When the API has organization brand turned on, the widget uses the brand's name, logo, colours and font.

A complete working example, with the API, this widget and the staff dashboard together, is in examples/starter-app of the repository.

Needs React 18 or newer. MIT licensed.