Embedding the Booking UI

Use data attributes and showUI() to embed the Resytech booking modal on any page.

The booking UI opens as a full-screen modal. You can trigger it with HTML data attributes (zero JavaScript) or programmatically with showUI().

Data Attributes (No JavaScript)

Add data-resytech-* attributes to any clickable element. The library automatically binds click handlers on DOM ready.

<button
  data-resytech-activity-id="activity-uuid"
  data-resytech-equipment-id="equipment-uuid">
  Book Now
</button>

Clicking this button opens the booking modal with the specified activity and equipment pre-selected.

Available Data Attributes

Attribute	Type	Description
`data-resytech-activity-id`	`string`	Activity UUID to pre-select
`data-resytech-equipment-id`	`string`	Equipment UUID to pre-select
`data-resytech-date`	`string`	Date to pre-select (`YYYY-MM-DD`)
`data-resytech-duration`	`number`	Duration in minutes
`data-resytech-time-start`	`string`	Time slot start (ISO 8601 datetime)
`data-resytech-time-end`	`string`	Time slot end (ISO 8601 datetime)
`data-resytech-price`	`number`	Price for the time slot

At least one of data-resytech-activity-id or data-resytech-equipment-id must be present for the element to be auto-bound. The location is always taken from the client's locationId config.

Minimal Example

Pre-select only the activity. The customer chooses equipment, date, and time in the modal:

<button data-resytech-activity-id="kayak-uuid">
  Book a Kayak
</button>

Fully Pre-Filled Example

Skip straight to checkout with everything pre-selected:

<button
  data-resytech-activity-id="kayak-uuid"
  data-resytech-equipment-id="single-kayak-uuid"
  data-resytech-date="2025-07-15"
  data-resytech-duration="120"
  data-resytech-time-start="2025-07-15T10:00:00"
  data-resytech-time-end="2025-07-15T12:00:00"
  data-resytech-price="89.99">
  Book: Single Kayak - Jul 15, 10am-12pm ($89.99)
</button>

Programmatic Usage with showUI()

Call showUI() directly for dynamic scenarios:

const client = window.resytech; // or your own instance

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

All properties are optional. Calling showUI() with no arguments opens the full booking flow from the start.

// Open with no pre-fill - customer picks everything
client.showUI();

// Pre-select just the activity
client.showUI({ activity: 'kayak-uuid' });

// Pre-select activity and date
client.showUI({ activity: 'kayak-uuid', date: '2025-07-15' });

Multiple Book Now Buttons

You can have as many booking buttons on a page as you need. Each one can pre-fill different options:

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

<h2>Kayak Rentals</h2>
<button data-resytech-activity-id="kayak-uuid" data-resytech-equipment-id="single-kayak-uuid">
  Book Single Kayak
</button>
<button data-resytech-activity-id="kayak-uuid" data-resytech-equipment-id="tandem-kayak-uuid">
  Book Tandem Kayak
</button>

<h2>Paddleboard Rentals</h2>
<button data-resytech-activity-id="paddleboard-uuid">
  Book Paddleboard
</button>

Each button opens the same modal but pre-selects different activities or equipment. Only one modal can be open at a time -- if the modal is already open, additional showUI() calls are ignored.

Real-World Examples

Activity Page with Book Now

<div class="activity-card">
  <img src="/images/sunset-cruise.jpg" alt="Sunset Cruise">
  <h2>Sunset Cruise</h2>
  <p>Enjoy a 2-hour cruise along the coastline at golden hour.</p>
  <p class="price">From $149 per person</p>
  <button
    class="btn-primary"
    data-resytech-activity-id="sunset-cruise-uuid"
    data-resytech-duration="120">
    Book This Experience
  </button>
</div>

Pricing Table

<table>
  <thead>
    <tr>
      <th>Duration</th>
      <th>Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 Hour</td>
      <td>$49</td>
      <td>
        <button
          data-resytech-activity-id="jet-ski-uuid"
          data-resytech-duration="60">
          Book Now
        </button>
      </td>
    </tr>
    <tr>
      <td>2 Hours</td>
      <td>$89</td>
      <td>
        <button
          data-resytech-activity-id="jet-ski-uuid"
          data-resytech-duration="120">
          Book Now
        </button>
      </td>
    </tr>
    <tr>
      <td>Half Day</td>
      <td>$159</td>
      <td>
        <button
          data-resytech-activity-id="jet-ski-uuid"
          data-resytech-duration="240">
          Book Now
        </button>
      </td>
    </tr>
  </tbody>
</table>

Calendar Integration

If you have your own calendar UI, open the booking modal when a user picks a date:

// Your calendar component calls this when a date is clicked
function onDateSelected(dateString) {
  window.resytech.showUI({
    activity: 'kayak-uuid',
    date: dateString  // e.g. '2025-07-15'
  });
}

Dynamic Button from API Data

Fetch activities from the API and generate buttons dynamically:

const api = new ResytechApi({
  baseUrl: 'https://api.bookingui.com/v1',
  cmsBaseUrl: 'https://cms.bookingui.com'
});

const init = await api.initialization.initialize({ identifier: 'my-session' });

init.activities.forEach(activity => {
  const btn = document.createElement('button');
  btn.textContent = `Book ${activity.name} - from $${activity.startingAtPrice}`;
  btn.setAttribute('data-resytech-activity-id', activity.uuid);
  document.getElementById('activity-list').appendChild(btn);
});

// Re-bind data attributes after adding new elements
// (auto-binding only runs once on DOM ready, so for dynamic elements use showUI() instead)
document.querySelectorAll('#activity-list button').forEach(btn => {
  btn.addEventListener('click', () => {
    window.resytech.showUI({
      activity: btn.getAttribute('data-resytech-activity-id')
    });
  });
});

Important Notes

Auto-binding runs once on DOMContentLoaded. If you add elements to the DOM after page load, use showUI() programmatically or attach your own click handlers.
One modal at a time. If the modal is already open, showUI() does nothing and logs a debug message.
The location property is always set from the client's locationId config. You do not need to set it in data attributes or showUI() options.

Embedding the Booking UI

On this page