# Web Components (/developers/web-components)



The Resytech client library includes a set of web components that render booking UI elements with Shadow DOM encapsulation. They automatically apply the operator's theme from the API and support CSS custom property overrides for full customization.

Setup [#setup]

After initializing the API, call `registerComponents()` to define all custom elements and push the theme + activity data to them:

```javascript
const api = new ResytechApi();
await api.initialization.initialize({ identifier: 'my-location' });
api.registerComponents();
```

Components are now available as HTML tags anywhere on the page.

Available Components [#available-components]

| Component         | Tag                            | Data Source | Key Event           |
| ----------------- | ------------------------------ | ----------- | ------------------- |
| Activity Card     | `<resytech-activity-card>`     | Init data   | `activity-select`   |
| Activity List     | `<resytech-activity-list>`     | Init data   | `activity-select`   |
| Equipment Card    | `<resytech-equipment-card>`    | JS property | `equipment-select`  |
| Equipment List    | `<resytech-equipment-list>`    | Init data   | `equipment-select`  |
| Duration Selector | `<resytech-duration-selector>` | JS property | `duration-select`   |
| Calendar          | `<resytech-calendar>`          | API call    | `date-select`       |
| Time Slots        | `<resytech-timeslots>`         | API call    | `timeslot-select`   |
| Add-on Selector   | `<resytech-addon-selector>`    | API call    | `addon-change`      |
| Cart Summary      | `<resytech-cart-summary>`      | JS property | —                   |
| Booking Embed     | `<resytech-booking-embed>`     | Iframe      | `checkout-complete` |

Theming [#theming]

All components inherit the operator's theme from the initialization response (`checkoutSettings.activityPageTheme`). The theme maps to CSS custom properties that you can override on any element or ancestor:

```html
<resytech-activity-card
  activity-id="uuid"
  style="--resytech-primary: #e11d48; --resytech-border-radius: 8px;">
</resytech-activity-card>
```

CSS Custom Properties [#css-custom-properties]

| Property                   | Description                             | Default                                |
| -------------------------- | --------------------------------------- | -------------------------------------- |
| `--resytech-primary`       | Primary accent color                    | `#2563eb`                              |
| `--resytech-secondary`     | Muted text color                        | `#64748b`                              |
| `--resytech-accent`        | Accent color (availability, highlights) | `#f59e0b`                              |
| `--resytech-card-bg`       | Card background                         | `#ffffff`                              |
| `--resytech-card-text`     | Card body text color                    | `#334155`                              |
| `--resytech-title`         | Title text color                        | `#0f172a`                              |
| `--resytech-border-radius` | Card corner radius                      | `12px`                                 |
| `--resytech-card-shadow`   | Default card shadow                     | `0 1px 3px ...`                        |
| `--resytech-hover-shadow`  | Hover state shadow                      | `0 10px 15px ...`                      |
| `--resytech-header-bg`     | Image placeholder / header background   | `#f8fafc`                              |
| `--resytech-header-text`   | Header text color                       | `#0f172a`                              |
| `--resytech-font-family`   | Font family                             | `system-ui, -apple-system, sans-serif` |

Override at any level — individual element, a wrapper div, or `:root` for site-wide defaults:

```css
/* Site-wide Resytech theme */
:root {
  --resytech-primary: #7c3aed;
  --resytech-border-radius: 16px;
  --resytech-font-family: 'Inter', sans-serif;
}
```

Events [#events]

Components emit [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) that bubble through the DOM. Listen on the component itself or any ancestor:

```javascript
document.addEventListener('activity-select', (e) => {
  console.log('Selected:', e.detail.activity.name);
});
```

| Event               | Fired By                       | Detail                                        |
| ------------------- | ------------------------------ | --------------------------------------------- |
| `activity-select`   | Activity Card, Activity List   | `{ activity: InitializationActivity }`        |
| `equipment-select`  | Equipment Card, Equipment List | `{ equipment: Equipment }`                    |
| `duration-select`   | Duration Selector              | `{ duration: Duration }`                      |
| `date-select`       | Calendar                       | `{ date: string, day: ActivityCalendarDay }`  |
| `timeslot-select`   | Time Slots                     | `{ slot: ActivityTimeSlot }`                  |
| `addon-change`      | Add-on Selector                | `{ selected: EligibleAddon[] }`               |
| `checkout-ready`    | Booking Embed                  | `{}`                                          |
| `checkout-complete` | Booking Embed                  | `{ confirmationCode: string, price: number }` |
| `checkout-close`    | Booking Embed                  | `{}`                                          |

Stored Init Data [#stored-init-data]

After initialization, you can access the stored data at any time via convenience methods:

```javascript
api.getOperator();          // Operator info
api.getActivities();        // Activity list
api.getCheckoutSettings();  // Checkout settings (includes theme)
api.getTheme();             // Activity page theme config
api.getInitResponse();      // Full initialization response
```

Next Steps [#next-steps]

* [Activity & Equipment Components](/developers/web-components-activities) — cards, lists, equipment selection
* [Booking Flow Components](/developers/web-components-booking) — calendar, time slots, add-ons, cart
* [Inline Booking Embed](/developers/web-components-embed) — embed the full booking UI inline