Skip to content
Mr Charles Mr Charles Developers

Bookings for music studios, on any website.

Studios run their rooms, prices and calendars on Mr Charles. Put the booking flow where their customers already are — hosted in one click, embedded with one line, or fully yours on the public API. No API key; a sandbox on the real host.
Start in 10 minutes JavaScript SDK API reference
Three ways in

Pick the amount of code you want to write

All three share the same engine: server-side prices, no double bookings, verified guests, card deposits through Stripe. Mix them — a hosted site and an embedded button is the usual combination.

01 · Hosted

A booking website in one click

Every studio gets slug.sites.mrcharles.app with rooms bookable 24/7, legal pages and reminders. Two DNS records put it on the studio's own domain.

effort · none Hosted site & custom domain → 02 · Embedded

Add booking to a site that exists

One script tag and mountRoomBooking() drops our booking screen into any page — Astro, WordPress, Webflow, plain HTML. Deep links work too.

effort · minutes JavaScript SDK → 03 · Custom

Your UI on our engine

The headless roomBooking() flow, or the raw API: availability → hold → one-time code → confirm. Render it however you like.

effort · hours Build your own booking UI →
Try it now

A real booking, against the real API

This is the embedded integration running on the demo studio, which is permanently in sandbox mode: pick a slot, type any name and a fake contact, use the code the page shows you. Nothing is sent, charged or kept.

Sandbox · nothing is sent or charged
Loading the demo studio…
index.html
<!-- 1. the SDK -->
<script src="/sdk/v0/mrcharles.min.js"></script>

<!-- 2. a box -->
<div id="book"></div>

<!-- 3. one call -->
<script>
  const mc = MrCharles.createClient();
  mc.mountRoomBooking('#book', {
    slug: 'demo-studio',
    roomId,
    lang: 'en',
    onBooked: ({ reference }) => track(reference),
  });
</script>
events — waiting for the SDK…
Under the hood

How a booking works

1 · AvailabilityFree spans per day for a room, after existing bookings, buffers, notice and horizon.
2 · HoldReserve a slot for 12 minutes. A one-time code goes to the guest's phone or email.
3 · VerifyThe guest types the code. Five attempts, three resends.
4 · ConfirmPay a deposit by card (Stripe) or at the studio. You get a reference and a manage link.
Server-side truthThe client sends room, date, start and duration. The API computes price, deposit and policy — you cannot create an invalid booking by accident.
No double bookingsA Postgres exclusion constraint on (room, time range) plus a per-room lock. Two frontends can race; only one wins.
No API keyPublic endpoints are open and rate-limited; the studio's slug is the only identifier. Writes carry a captcha token in production.
Money stays in StripeCard deposits are confirmed only by Stripe's signed webhook — never by the browser.
Also in the SDK

Teachers, not just rooms

A teacher’s site can list their published lesson offers, show real bookable times and hand the student to the app to book — mc.teachers.* and mc.links.bookLesson().

  • Studios
  • Teachers & schools
  • Agencies building studio sites
  • Directories & band tools
  • City guides
Sandbox Build and test on the production host without sending a message or charging a card.
Go-live checklist The six things to check before you switch to a live slug.
Interactive API reference Every public endpoint with request and response schemas, from the OpenAPI spec.
Errors & rate limits Every error code, what triggers it, and what to show the guest.