Booking widget

Preview: not yet available.

The booking widget lets visitors of a venue's own website check availability and book. It is a web component loaded from embed.mouve.it.

Add it

<script type="module" src="https://embed.mouve.it/v1/booking.1.1.0.js"
  integrity="sha384-pxKmg9k/E3TmwEl5+gA0Q6B5mdhfs3beSPrwqB/Pkb1L5xce3Xcyf8sAUwEK/aB/"
  crossorigin="anonymous"></script>
<mouve-booking venue="kalamaja-padel"></mouve-booking>

venue is the venue slug. The slug alone is enough. A key= attribute is optional. In the setup flow, the tool widget_snippet_get returns this snippet with the right slug. See the agent guide.

Script versions

Use the pinned file booking.1.1.0.js with its integrity hash, as above. The browser refuses the file if its bytes change. https://embed.mouve.it/v1/booking.js (without the version) is a moving alias that is cached for 5 minutes and has no integrity guarantee. Do not use it on a production site.

Until embed.mouve.it is live, the same file is served at https://mouve.it/embed/v1/booking.1.1.0.js. Use that address only as a fallback.

Publishable key and origins

The widget reads availability with a publishable key that belongs to the venue. It is safe in page source. It cannot do anything an anonymous visitor could not.

The widget only works on origins that Mouve has verified for the venue. The owner proves control of the domain on mouve.it. https://venue.ee and https://www.venue.ee count as one verified site. A page on any other origin gets an error element and no data. Embed reads always need a verified origin. The first load from each origin is recorded, and venue_status shows it.

The widget's anonymous reads use their own embed endpoints (/embed/v1/venues/...). They are not part of /public/v1. Agents and integrations use the credentialed /public/v1/venues/... paths in the agent guide.

What visitors see

The widget shows a slot grid for 7 days. Choosing a slot opens a booking sheet hosted by Mouve. Visitors enter their details on mouve.it, not in your page, so the site never handles them. In v1 payment happens at the venue. The sheet is on the Mouve site the widget script was loaded from (mouve.it for embed.mouve.it); the script decides this itself, nothing on your page can change it.

Theming

Set these CSS custom properties on the element or a parent. All are optional. Set --mouve-booking-bg and --mouve-booking-fg together, so text stays readable.

mouve-booking {
  --mouve-booking-accent: #0b5fff;
  --mouve-booking-radius: 12px;
  --mouve-booking-font: system-ui, sans-serif;
  --mouve-booking-bg: #ffffff;
  --mouve-booking-fg: #111111;
}

The booking sheet is hosted by Mouve and is not themable.

Errors

If the widget cannot load it shows a short message and writes the reason to the browser console. The usual causes: the venue is not public yet, or booking is switched off for the venue. Two error codes are about origins: