# Installation & Setup (/developers/installation)



Script Tag (Recommended) [#script-tag-recommended]

Include the library directly in your HTML. Add `data-resytech-*` attributes to auto-initialize a `ResytechClient` instance:

```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"
  data-resytech-debug="true">
</script>
```

This automatically:

1. Creates a `ResytechClient` instance with your configuration
2. Exposes it as `window.resytech`
3. Binds click handlers to any elements with `data-resytech-activity-id` or `data-resytech-equipment-id` attributes

Script Tag Data Attributes [#script-tag-data-attributes]

| Attribute                   | Required | Description                                                               |
| --------------------------- | -------- | ------------------------------------------------------------------------- |
| `data-resytech-location-id` | Yes      | Your Resytech location UUID                                               |
| `data-resytech-base-url`    | Yes      | Base URL of your booking platform (e.g. `https://booking.yourdomain.com`) |
| `data-resytech-debug`       | No       | Set to `"true"` to enable console logging                                 |

NPM / ES Modules [#npm--es-modules]

Install from NPM:

```bash
npm install resytech-client-lib
```

Import the classes you need:

```javascript
import { ResytechClient, ResytechApi, ResytechBlogRenderer } from 'resytech-client-lib';

const client = new ResytechClient({
  locationId: 'YOUR_LOCATION_ID',
  baseUrl: 'https://booking.yourdomain.com'
});
```

CDN [#cdn]

Load directly from the Resytech CDN:

```html
<script src="https://static.resytech.com/js/resytech.js"></script>
```

If you omit the `data-resytech-*` attributes on the script tag, no auto-initialization occurs. You can then create instances manually in your own JavaScript.

Global Exports [#global-exports]

When loaded via script tag, the library exposes these globals on `window`:

| Global                        | Type     | Description                                                                                                                               |
| ----------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `window.ResytechClient`       | Class    | The booking widget class                                                                                                                  |
| `window.ResytechApi`          | Class    | The API client class                                                                                                                      |
| `window.ResytechBlogRenderer` | Class    | The blog renderer class                                                                                                                   |
| `window.resytech`             | Instance | Auto-initialized `ResytechClient` instance (only when `data-resytech-location-id` and `data-resytech-base-url` are set on the script tag) |

Manual Initialization [#manual-initialization]

If you prefer not to use auto-initialization, create a client instance yourself:

```javascript
const client = new ResytechClient({
  locationId: 'YOUR_LOCATION_ID',
  baseUrl: 'https://booking.yourdomain.com',
  theme: {
    primaryColor: '#007bff',
    fontFamily: 'Inter, sans-serif'
  },
  debug: false
});
```

The `ResytechApi` client is configured separately:

```javascript
const api = new ResytechApi({
  baseUrl: 'https://api.bookingui.com/v1',
  cmsBaseUrl: 'https://cms.bookingui.com',
  debug: true,
  timeout: 30000
});
```

Next Steps [#next-steps]

* [ResytechClient Reference](/developers/resytech-client) -- full widget API
* [Embedding the Booking UI](/developers/embed-booking-ui) -- data attributes and pre-fill options
* [ResytechApi Reference](/developers/resytech-api) -- building custom flows