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

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

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://js.resytech.com/latest/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, data-resytech-equipment-id, or data-resytech-gift-card 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: [
    { equipmentUuid: 'equipment-uuid', quantity: 1 }
  ],
  date: '2025-07-15',
  durationMins: 120,
  timeSlotStart: '2025-07-15T14:00:00',
  timeSlotEnd: '2025-07-15T16:00:00',
  timeSlotPrice: 199.99
});

equipment is an array — each entry can include a quantity and add-ons:

client.showUI({
  activity: 'activity-uuid',
  equipment: [
    {
      equipmentUuid: 'single-kayak-uuid',
      quantity: 2,
      addons: [
        { addonUuid: 'dry-bag-uuid', quantity: 2 }
      ]
    }
  ]
});

CheckoutRequest Options

EquipmentSelection

AddonSelection

GiftCardSelection

All properties are optional. Pass an empty object (giftCard: {}) to open the gift card form with no pre-fills.

client.showUI({
  giftCard: {
    amount: 100,
    purchaser: { name: 'Alex Morgan', email: 'alex@example.com' },
    recipient: { name: 'Jamie Lee', email: 'jamie@example.com', message: 'Happy birthday!' }
  }
});

Gift card purchases emit giftcard:complete / giftcard:close events — see Checkout Events.

Locking the schedule

When the parent page has already chosen the slot (via your own calendar UI or a third-party scheduler), set lockSchedule: true so the customer can't navigate back to pick a different time from inside the modal:

client.showUI({
  activity: 'kayak-uuid',
  equipment: [{ equipmentUuid: 'single-kayak-uuid', quantity: 1 }],
  date: '2025-07-15',
  durationMins: 120,
  timeSlotStart: '2025-07-15T10:00:00',
  timeSlotEnd: '2025-07-15T12:00:00',
  timeSlotPrice: 89.99,
  lockSchedule: true
});

The modal always runs in SchedulingOnly nav mode, where the only crumb is the "Choose another date/time" link. lockSchedule removes that crumb, leaving an empty navbar that hides itself.

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

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);
});

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

setOtaCode(otaCode)

Sets the OTA attribution code at runtime. Pass null or undefined to clear it. Takes effect on the next showUI() call — the iframe URL is built at open time, not edited live. See OTA Partner Integration.

client.setOtaCode('viator');
// later, switch partners
client.setOtaCode('getyourguide');
// or clear it
client.setOtaCode(null);

Useful when:

• Creating a ResytechClient programmatically without knowing the OTA code yet
• Configuring the auto-init'd window.resytech instance from a script that loads after resytech.js
• Running multiple ResytechClient instances on one page that target different OTA partners

getOtaCode()

Returns the currently configured OTA code, or undefined if none is set.

const code = client.getOtaCode(); // "viator" | undefined

updateConfig(config)

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

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

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();

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 dimmed backdrop (rgba(0, 0, 0, 0.5)) 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 entire overlay. The booking UI's own internal layout centers a white card; the transparent area around it shows the dimmed/blurred backdrop through the iframe. 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

Dismiss Behavior

By default, the modal can be dismissed three ways:

1. The X button in the booking UI header
2. Pressing Escape — disable with closeOnEscape: false
3. Clicking outside the booking card (on the dimmed backdrop area) — disable with closeOnBackdropClick: false

The X button always closes regardless of config. ESC and click-outside are detected by the booking UI inside the iframe and reported to the parent via PostMessage with a reason field; the lib gates close on the corresponding config option. See Checkout Events.

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://js.resytech.com/latest/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>