ResytechClient Reference

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

const client = new ResytechClient(config);

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`

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.

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.

<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 for details.

Methods

showUI(options?)

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

client.showUI();

With pre-fill options:

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

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:

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

close()

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

client.close();

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

on(event, callback)

Registers an event listener.

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

Parameter	Type	Description
`event`	`string`	Event name (see Checkout Events)
`callback`	`(data: any) => void`	Function called when the event fires

off(event, callback)

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

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)

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

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

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

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).

client.destroy();

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

<!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>