# ResytechClient Reference (/developers/resytech-client)



`ResytechClient` opens a full-screen booking modal powered by an iframe. It handles the overlay, loading spinner, body scroll lock, and cross-frame communication automatically.

Constructor [#constructor]

```javascript
const client = new ResytechClient(config);
```

ResytechClientConfig [#resytechclientconfig]

| Property             | Type      | Required | Description                                                               |
| -------------------- | --------- | -------- | ------------------------------------------------------------------------- |
| `locationId`         | `string`  | Yes      | Your Resytech location UUID                                               |
| `baseUrl`            | `string`  | Yes      | Base URL of your booking platform (e.g. `https://booking.yourdomain.com`) |
| `theme`              | `object`  | No       | Theme overrides                                                           |
| `theme.primaryColor` | `string`  | No       | Primary brand color (CSS color value)                                     |
| `theme.fontFamily`   | `string`  | No       | Font family for the booking UI                                            |
| `debug`              | `boolean` | No       | Enable debug logging to the console. Default: `false`                     |

```javascript
const client = new ResytechClient({
  locationId: 'abc123-def456',
  baseUrl: 'https://booking.yourdomain.com',
  theme: {
    primaryColor: '#e63946',
    fontFamily: '"Poppins", sans-serif'
  },
  debug: true
});
```

Throws an `Error` if `locationId` or `baseUrl` is missing.

Auto-Initialization [#auto-initialization]

When loaded via a script tag with `data-resytech-location-id` and `data-resytech-base-url` attributes, the library automatically creates a `ResytechClient` instance and assigns it to `window.resytech`.

```html
<script
  src="https://static.resytech.com/js/resytech.js"
  data-resytech-location-id="YOUR_LOCATION_ID"
  data-resytech-base-url="https://booking.yourdomain.com"
  data-resytech-debug="true">
</script>

<script>
  // The client is ready to use
  window.resytech.showUI();
</script>
```

Auto-initialization also scans the DOM for elements with `data-resytech-activity-id` or `data-resytech-equipment-id` and binds click handlers to them. See [Embedding the Booking UI](/developers/embed-booking-ui) for details.

Methods [#methods]

showUI(options?) [#showuioptions]

Opens the booking modal. If the modal is already open, this is a no-op.

```javascript
client.showUI();
```

With pre-fill options:

```javascript
client.showUI({
  activity: 'activity-uuid',
  equipment: 'equipment-uuid',
  date: '2025-07-15',
  durationMins: 120,
  timeSlotStart: '2025-07-15T14:00:00',
  timeSlotEnd: '2025-07-15T16:00:00',
  timeSlotPrice: 199.99
});
```

CheckoutRequest Options [#checkoutrequest-options]

| Property        | Type     | Description                               |
| --------------- | -------- | ----------------------------------------- |
| `location`      | `string` | Location UUID. Auto-filled from config.   |
| `activity`      | `string` | Activity UUID to pre-select               |
| `equipment`     | `string` | Equipment UUID to pre-select              |
| `date`          | `string` | Date to pre-select (format: `YYYY-MM-DD`) |
| `durationMins`  | `number` | Duration in minutes                       |
| `timeSlotStart` | `string` | Time slot start (ISO 8601 datetime)       |
| `timeSlotEnd`   | `string` | Time slot end (ISO 8601 datetime)         |
| `timeSlotPrice` | `number` | Price for the selected time slot          |

When `showUI()` is called it:

1. Creates a fixed-position overlay covering the entire viewport with a dark blurred backdrop
2. Displays a loading spinner while the iframe loads
3. Loads the booking UI in an iframe
4. Locks body scroll (`document.body.style.overflow = 'hidden'`)
5. Emits the `checkout:open` event

close() [#close]

Closes the booking modal, removes the iframe and overlay, and restores body scroll.

```javascript
client.close();
```

Emits the `checkout:close` event. If the modal is not open, this is a no-op.

on(event, callback) [#onevent-callback]

Registers an event listener.

```javascript
client.on('checkout:complete', (data) => {
  console.log('Booking confirmed:', data.confirmationCode);
});
```

| Parameter  | Type                  | Description                                                     |
| ---------- | --------------------- | --------------------------------------------------------------- |
| `event`    | `string`              | Event name (see [Checkout Events](/developers/checkout-events)) |
| `callback` | `(data: any) => void` | Function called when the event fires                            |

off(event, callback) [#offevent-callback]

Removes a previously registered event listener. You must pass the same function reference used with `on()`.

```javascript
function onComplete(data) {
  console.log('Done:', data);
}

client.on('checkout:complete', onComplete);
// Later...
client.off('checkout:complete', onComplete);
```

| Parameter  | Type                  | Description                                  |
| ---------- | --------------------- | -------------------------------------------- |
| `event`    | `string`              | Event name                                   |
| `callback` | `(data: any) => void` | The same function reference passed to `on()` |

updateConfig(config) [#updateconfigconfig]

Merges new configuration values into the current config. Does not affect an already-open modal.

```javascript
client.updateConfig({
  debug: true,
  theme: { primaryColor: '#22c55e' }
});
```

| Parameter | Type                            | Description         |
| --------- | ------------------------------- | ------------------- |
| `config`  | `Partial<ResytechClientConfig>` | Properties to merge |

destroy() [#destroy]

Closes the modal (if open), removes the `window.message` listener, and clears all event listeners. Call this when you no longer need the client (e.g. in a SPA on route change).

```javascript
client.destroy();
```

Modal Behavior [#modal-behavior]

When `showUI()` is called, the widget:

* Creates a **fixed-position overlay** at `z-index: 2147483645` covering the full viewport (`100dvw x 100dvh`)
* Applies a **dark backdrop** (`rgba(0, 0, 0, 0.8)`) with a `blur(4px)` backdrop filter
* Shows a **loading spinner** centered in the overlay while the iframe loads
* Loads the booking UI in an **iframe** that fills the overlay. The iframe fades in (`opacity 0 -> 1` over 300ms) once the `checkout-ready` message is received from the iframe (or after a 3-second timeout)
* **Locks body scroll** to prevent background scrolling
* The iframe has the `allow="payment"` attribute for Stripe payment integration
* The background overlay is **not** clickable -- the user must complete or close the booking through the iframe UI itself

Full Example [#full-example]

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Rental Shop</title>
</head>
<body>
  <h1>Kayak Rentals</h1>

  <button id="book-btn">Book a Kayak</button>

  <script src="https://static.resytech.com/js/resytech.js"></script>
  <script>
    const client = new ResytechClient({
      locationId: 'YOUR_LOCATION_ID',
      baseUrl: 'https://booking.yourdomain.com'
    });

    // Listen for completed bookings
    client.on('checkout:complete', (data) => {
      alert('Booking confirmed! Code: ' + data.confirmationCode);
    });

    // Open modal on button click
    document.getElementById('book-btn').addEventListener('click', () => {
      client.showUI({
        activity: 'kayak-activity-uuid',
        date: '2025-08-01'
      });
    });
  </script>
</body>
</html>
```