Links & embed

Keep the website you have and send the booking part to us.

Deep links

Every hosted site exposes stable URLs. Point a button at them.

Goal	URL
The studio’s site	`https://<slug>.sites.mrcharles.app/`
Book a specific room	`https://<slug>.sites.mrcharles.app/reservar/<roomId>`
A guest’s booking	`https://<slug>.sites.mrcharles.app/r/<manageToken>`
Legal pages	`/legal/aviso-legal`, `/legal/privacidad`, `/legal/cookies`

Pre-fill the form with query parameters so the guest lands on the day they clicked:

<a class="btn"
   href="https://studio-uno-madrid.sites.mrcharles.app/reservar/d9a36c09-d151-5d4a-a077-296293b07be4?date=2026-10-08&start=17:00&duration=120&lang=es">
  Book Rehearsal B
</a>

Parameter	Meaning
`date`	`YYYY-MM-DD`, in the studio’s time zone
`start`	`HH:MM`
`duration`	minutes; must satisfy the room’s min/max/step
`lang`	`es`, `ca` or `en`

Unknown or invalid values are ignored — the page still loads, just without the preselection.

Embed with an iframe

<iframe
  src="https://studio-uno-madrid.sites.mrcharles.app/reservar/d9a36c09-d151-5d4a-a077-296293b07be4?lang=es&embed=1"
  title="Book Rehearsal B"
  style="width:100%;height:760px;border:0;border-radius:14px"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="payment"></iframe>

embed=1 hides the site’s own header and footer so the screen drops into your layout.
allow="payment" is required for card deposits (Stripe) inside the frame.
Give it at least 720 px of height; the flow is four short steps and the last one shows the confirmation.

The embedded page posts its height to the parent whenever the step changes:

window.addEventListener('message', (e) => {
  if (!e.origin.endsWith('.sites.mrcharles.app')) return;      // always check the origin
  if (e.data?.type === 'mrcharles:resize') {
    document.querySelector('#booking').style.height = `${e.data.height}px`;
  }
  if (e.data?.type === 'mrcharles:booked') {
    // { reference, bookingId, manageUrl } — fire your analytics here
  }
});

Which one

Simplest and fastest. The guest leaves your page for a screen that is clearly the studio’s. Best on mobile, where iframes and keyboards fight each other.