# Embedding the Booking UI (/developers/embed-booking-ui)



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) [#data-attributes-no-javascript]

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

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

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

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

Fully Pre-Filled Example [#fully-pre-filled-example]

Skip straight to checkout with everything pre-selected:

```html
<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() [#programmatic-usage-with-showui]

Call `showUI()` directly for dynamic scenarios:

```javascript
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.

```javascript
// 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 [#multiple-book-now-buttons]

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

```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">
</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 [#real-world-examples]

Activity Page with Book Now [#activity-page-with-book-now]

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

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

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

```javascript
// 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 [#dynamic-button-from-api-data]

Fetch activities from the API and generate buttons dynamically:

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