Erste Schritte

Vom Beispiel zum funktionierenden Narrow-Casting-Bildschirm in wenigen Schritten.

1. Sofort ausprobieren (Demo-Modus)

Die Beispiele funktionieren sofort, ohne Konto: Solange baseUrl in config.js noch auf dem Platzhalter JOUWOMGEVING steht, zeigt das SDK realistische Demo-Daten. Öffnen Sie ein Beispiel und Sie sehen einen funktionierenden Bildschirm; unten steht dann DEMO.

2. Ein Beispiel mit Ihrer Umgebung verbinden

Richten Sie zuerst den Zugang ein (API-Benutzer und CORS) — siehe Authentifizierung & CORS einrichten. Öffnen Sie danach die config.js des gewählten Beispiels und tragen Sie ein:

• baseUrl — https://JOUWOMGEVING.i-reserve.net
• auth — Benutzername und Passwort des (read-only) API-Benutzers
• search — der Filter: welche Produkte und welcher Zeitraum
• columns / columnMap — nur wenn Ihre Felder anders heißen

Sobald eine echte baseUrl eingetragen ist, wechselt das SDK automatisch von Demo- zu Live-Daten.

3. Die Beispiele

• Tagesplan-Tabelle — Aktivitäten von heute, mit Paginierung und optionaler Foto-Slideshow.
• Raumschilder — farbige Raumkarten mit "jetzt belegt"-Anzeige.
• Fullscreen-Slideshow — bildschirmfüllende Fotos mit Buchungs-Bildunterschrift.
• Events-Grid — Kärtchen mit Uhrzeit und freien Plätzen.

4. Corporate Design anpassen

Alle Farben, Formen und die Schriftart stehen als Variablen oben in shared/ireserve.css (:root { --ir-primary: … }). Passen Sie diese für das gewünschte Corporate Design an; ersetzen Sie shared/i-reserve-logo.png durch das richtige Logo.

5. Ein einzelnes Beispiel ausliefern

Möchten Sie ein einzelnes Beispiel separat verwenden, kopieren Sie den Beispielordner und den Ordner shared/ mit (die Beispiele verweisen relativ auf ../../shared/).

Hinweis: Bei Narrow Casting stehen die API-Daten lesbar im Browser. Verwenden Sie immer einen read-only API-Benutzer — siehe Authentifizierung & CORS einrichten.