Inline Booking Embed

Embed the full Resytech booking UI inline on your page using the booking embed web component.

The <resytech-booking-embed> component embeds the Resytech booking UI directly on your page as an inline iframe. Unlike the modal widget which overlays the entire viewport, this component sits within your page layout — perfect for dedicated booking pages.

Basic Usage

<resytech-booking-embed
  base-url="https://yourlocation.bookingui.com"
  location-id="your-location-id">
</resytech-booking-embed>

This renders the full booking flow inline: activity selection → equipment → duration → calendar → time slot → checkout.

Deep-Linking to an Activity

Skip the activity listing and open a specific activity's equipment selection:

<resytech-booking-embed
  base-url="https://yourlocation.bookingui.com"
  location-id="your-location-id"
  activity-id="activity-uuid">
</resytech-booking-embed>

Pre-fill every step and land directly on the checkout page:

<resytech-booking-embed
  base-url="https://yourlocation.bookingui.com"
  location-id="your-location-id"
  activity-id="activity-uuid"
  equipment-id="equipment-uuid"
  date="2025-07-15"
  duration-mins="120"
  time-start="2025-07-15T10:00:00"
  time-end="2025-07-15T12:00:00"
  price="89.99">
</resytech-booking-embed>

Attributes

Attribute	Type	Default	Description
`base-url`	`string`	—	Required. Your bookingui.com URL (e.g. `https://yourlocation.bookingui.com`)
`location-id`	`string`	—	Required. Your Resytech location UUID
`activity-id`	`string`	—	Activity UUID to pre-select
`equipment-id`	`string`	—	Equipment UUID to pre-select
`date`	`string`	—	Date to pre-select (`YYYY-MM-DD`)
`duration-mins`	`number`	—	Duration in minutes
`time-start`	`string`	—	Time slot start (ISO 8601)
`time-end`	`string`	—	Time slot end (ISO 8601)
`price`	`number`	—	Time slot price
`height`	`number`	`700`	Initial iframe height in pixels (auto-resizes once loaded)
`nav-mode`	`string`	`SchedulingOnly`	Navigation mode passed to the booking UI
`show-close`	`boolean`	`false`	Show the close (X) button in the booking UI header

Auto Height

The embedded booking UI reports its content height to the parent. The component automatically resizes to match — no fixed height needed after the initial load. The height attribute only controls the container size before the first height message arrives.

Events

Listen for checkout lifecycle events on the component or any ancestor:

const embed = document.querySelector('resytech-booking-embed');

embed.addEventListener('checkout-ready', () => {
  console.log('Booking UI is loaded and ready');
});

embed.addEventListener('checkout-complete', (e) => {
  console.log('Booking confirmed!', e.detail.confirmationCode);
  console.log('Total paid:', e.detail.price);
});

embed.addEventListener('checkout-close', () => {
  console.log('User closed the booking UI');
});

Event	Detail	Description
`checkout-ready`	`{}`	Booking UI has loaded
`checkout-complete`	`{ confirmationCode, price }`	Customer completed a booking
`checkout-close`	`{}`	Customer clicked close (if `show-close` is enabled)
`gift-card-purchase-complete`	`{ giftCardCode, amount }`	Gift card purchased

Hybrid Approach

Use custom web components for browsing and the embed for checkout. This gives you full control over the discovery experience while leveraging the hosted checkout for payments:

<!-- Custom activity browsing -->
<resytech-activity-list></resytech-activity-list>

<!-- Inline booking embed (hidden initially) -->
<div id="booking-section" style="display: none;">
  <resytech-booking-embed id="embed"
    base-url="https://yourlocation.bookingui.com"
    location-id="your-location-id">
  </resytech-booking-embed>
</div>

<script>
  document.addEventListener('activity-select', (e) => {
    const embed = document.getElementById('embed');
    embed.setAttribute('activity-id', e.detail.activity.uuid);
    embed.reload();
    document.getElementById('booking-section').style.display = 'block';
  });
</script>

	Embed (`<resytech-booking-embed>`)	Modal (`ResytechClient`)
Placement	Inline in page flow	Full-viewport overlay
Use case	Dedicated booking pages	"Book Now" buttons site-wide
Trigger	Always visible (or toggled)	Opens on click / `showUI()`
Close button	Hidden by default	Always shown
Scroll	Page scrolls naturally	Modal has its own scroll

Reloading

Call .reload() to refresh the iframe with current attributes:

const embed = document.querySelector('resytech-booking-embed');
embed.setAttribute('activity-id', 'new-activity-uuid');
embed.reload();

On this page