Aan de slag

Van voorbeeld naar werkend narrow-casting-scherm in een paar stappen.

1. Direct uitproberen (demo-modus)

De voorbeelden werken meteen, zonder account: zolang baseUrl in config.js nog op de placeholder JOUWOMGEVING staat, toont de SDK realistische demo-data. Open een voorbeeld en je ziet een werkend scherm; onderin staat dan DEMO.

2. Een voorbeeld koppelen aan jouw omgeving

Regel eerst de toegang (API-gebruiker en CORS) — zie Authenticatie & CORS instellen. Open daarna de config.js van het gekozen voorbeeld en vul in:

• baseUrl — https://JOUWOMGEVING.i-reserve.net
• auth — gebruikersnaam en wachtwoord van de (read-only) API-gebruiker
• search — het filter: welke producten en welke periode
• columns / columnMap — alleen als jouw velden anders heten

Zodra een echte baseUrl is ingevuld, schakelt de SDK automatisch van demo- naar live-data.

3. De voorbeelden

• Dagrooster-tabel — activiteiten van vandaag, met paginatie en optionele foto-slideshow.
• Kamerbordjes — gekleurde kamerkaarten met "nu bezig"-weergave.
• Fullscreen slideshow — schermvullende foto's met boekingen-onderschrift.
• Events-grid — kaartjes met tijd en vrije plaatsen.

4. Huisstijl aanpassen

Alle kleuren, vormen en het lettertype staan als variabelen bovenin shared/ireserve.css (:root { --ir-primary: … }). Pas die aan voor de gewenste huisstijl; vervang shared/i-reserve-logo.png door het juiste logo.

5. Eén voorbeeld uitleveren

Wil je één voorbeeld los gebruiken, kopieer dan de voorbeeldmap én de map shared/ mee (de voorbeelden verwijzen relatief naar ../../shared/).

Let op: bij narrow casting staan de API-gegevens leesbaar in de browser. Gebruik altijd een read-only API-gebruiker — zie Authenticatie & CORS instellen.