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

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

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

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:

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

CSS Custom Properties

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

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

Events

Components emit CustomEvents that bubble through the DOM. Listen on the component itself or any ancestor:

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

Stored Init Data

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

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

• Activity & Equipment Components — cards, lists, equipment selection
• Booking Flow Components — calendar, time slots, add-ons, cart
• Inline Booking Embed — embed the full booking UI inline