# Inline Booking Embed (/developers/web-components-embed)



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

Basic Usage [#basic-usage]

```html
<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 [#deep-linking-to-an-activity]

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

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

Skip to Checkout [#skip-to-checkout]

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

```html
<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 [#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 [#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 [#events]

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

```javascript
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 [#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:

```html
<!-- 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 vs Modal Widget [#embed-vs-modal-widget]

|                  | 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 [#reloading]

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

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