Getting started

From example to a working narrow-casting screen in a few steps.

1. Try it right away (demo mode)

The examples work immediately, without an account: while baseUrl in config.js is still on the placeholder YOURENVIRONMENT, the SDK shows realistic demo data. Open an example and you see a working screen; the bottom then shows DEMO.

2. Connect an example to your environment

First arrange access (API user and CORS) — see Setting up authentication & CORS. Then open the config.js of the chosen example and fill in:

• baseUrl — https://YOURENVIRONMENT.i-reserve.net
• auth — username and password of the (read-only) API user
• search — the filter: which products and which period
• columns / columnMap — only if your fields are named differently

As soon as a real baseUrl is filled in, the SDK automatically switches from demo to live data.

3. The examples

• Day schedule table — today's activities, with pagination and an optional photo slideshow.
• Room signs — coloured room cards with an "in use" display.
• Fullscreen slideshow — full-screen photos with a bookings caption.
• Events grid — cards with time and free places.

4. Customise the styling

All colours, shapes and the font are variables at the top of shared/ireserve.css (:root { --ir-primary: … }). Adjust those for the desired styling; replace shared/i-reserve-logo.png with the right logo.

5. Shipping a single example

To use a single example on its own, copy the example folder and the shared/ folder together (the examples reference ../../shared/ relatively).

Note: with narrow casting the API details are readable in the browser. Always use a read-only API user — see Setting up authentication & CORS.