Home Administrator Widget und Buttons
Instructie

Schnellstart: das Widget

Das Widget ist eine Option zur Integration mit i-Reserve, wenn Sie Ihren Kunden die Möglichkeit bieten möchten, mit i-Reserve auf Ihrer eigenen Seite zu reservieren. Beispiele für das Widget finden Sie in der Vergaderzalen-Demo (Tab-Widget) und der Rondleidingen-Demo (Button-Widget). Diese Anleitung begleitet Sie bei der Inbetriebnahme des Widgets.

Zuerst erstellen wir Links für die Seiten, die das Widget anzeigen soll. Das Standard-Widget hat zwei Tabs, daher wählen wir hierfür zwei Seiten aus. Dies können zum Beispiel zwei Kalenderseiten sein oder die Produktliste und ein Kontaktformular.

Wenn Sie die beiden Seiten ausgewählt und gegebenenfalls erstellt haben, gehen Sie in der Konfiguration der Umgebung zu Kundenseite > Inhaltsseiten > Seiten verwalten. Hier können neue SEO-Links hinzugefügt werden. Nachfolgend werden zwei wichtige Einstellungen dazu erläutert.

Original

Geben Sie bei Original ein, was nach dem "/" hinter dem Domainnamen steht.

  • Für https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 geben Sie also front?mod=form&form_id=7 ein.

Alias

Geben Sie hier ein, was nach dem "/" stehen soll. Dies kann zum Beispiel "contact" oder "zalen" sein. Wenn Sie "contact" wählen, ist die Seite ab dann auch über {Ihre Umgebungs-URL}/contact erreichbar (auf rondleidingen.i-reserve.net wird dies zum Beispiel https://rondleidingen.i-reserve.net/contact)

Da wir nun die Seiten haben, die für das Widget verwendet werden sollen, können wir die Konfiguration anlegen. Dazu gehen wir in der Konfiguration der Umgebung zu Kundenseite > Widget und Buttons.

Fügen Sie hier eine neue Konfiguration hinzu und wählen Sie den Typ Widget. Beim Widget-Typ kann zwischen einem Button-Widget oder einem Tab-Widget gewählt werden.

Suchen Sie bei Tab eins und Tab zwei die SEO-Links, die wir im vorherigen Schritt angelegt haben. Hinter dem Namen steht hier [SEO].

In die Felder Tab eins Beschreibung und Tab zwei Beschreibung geben Sie die Namen ein, die die Tabs erhalten sollen.

Wenn Sie mit diesen Einstellungen fertig sind, klicken Sie auf den </>-Button unten am Block. Hier finden Sie die Tags, die in den Head und den Body der Seite auf Ihrer Website aufgenommen werden müssen.

Wenn Sie das Widget in mehreren Sprachen verwenden möchten, sind einige zusätzliche Schritte erforderlich, um dies korrekt einzurichten.

Ausführlichere Beschreibungen dieser Bestandteile finden Sie in den vorherigen Schritten.

SEO-Links

Mithilfe der SEO-Links können dieselben Seiten in verschiedenen Sprachen angezeigt werden.

Für https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 geben Sie bei Original bei den SEO-Links Folgendes ein:

  • Niederländisch: front?mod=form&form_id=7&lang=nl
  • Englisch: front?mod=form&form_id=7&lang=en
  • Deutsch: front?mod=form&form_id=7&lang=de

Achten Sie darauf, dass Sie beim Alias verschiedene Aliasse verwenden, zum Beispiel "contact", "contact-en" und "contact-de"

Widget-Konfigurationen

Legen Sie für jede Sprache eine separate Widget-Konfiguration an, in der Sie die SEO-Links dieser Sprache verwenden.

Hinzufügen zu Ihrer Website

Kopieren Sie für eine sprachspezifische Konfiguration die Head- und Body-Tags. Setzen Sie diese anschließend auf die entsprechenden Sprachseiten Ihrer Website.

Native Widget — Integrationsanleitung

Anweisungen für das Platzieren des <ires-native-widget> auf einer Website.

1. Widget auf eine Seite setzen

Fügen Sie zwei Zeilen zu Ihrem HTML hinzu:

<script type="module" src="https://default.i-reserve.net/javascript/embed/iResController.js"></script>
<ires-native-widget src="https://default.i-reserve.net/api/rest/widget/{configId}"></ires-native-widget>

Ersetzen Sie {configId} durch die ID Ihrer Widget-Konfiguration (zu finden im Admin-Panel).

Vollständiges Beispiel

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein Restaurant</title>
    <script type="module" src="https://default.i-reserve.net/javascript/embed/iResController.js"></script>
</head>
<body>
    <h1>Willkommen in unserem Restaurant</h1>
    <p>Buchen Sie einen Tisch über das Reservierungswidget unten rechts.</p>

    <ires-native-widget src="https://default.i-reserve.net/api/rest/widget/30120"></ires-native-widget>
</body>
</html>

Das Widget erscheint als Floating Button unten rechts auf der Seite.

Attribute

Attribut Erforderlich Beschreibung
src ja URL zur Widget-API (https://{domain}/api/rest/widget/{configId})
lang nein Sprache: nl, en, de, fr. Standard: automatisch auf Basis der Browsersprache

Beispiel mit Sprache

<ires-native-widget
    src="https://default.i-reserve.net/api/rest/widget/30120"
    lang="en"
></ires-native-widget>

2. Widget über JavaScript öffnen

Das Widget kann programmatisch über den globalen iResWidget-Namespace geöffnet, geschlossen und umgeschaltet werden. Dies ist praktisch für eigene "Jetzt reservieren"-Buttons.

Globaler Namespace: iResWidget

Methode Beschreibung
iResWidget.OpenWidget() Öffnet das Widget
iResWidget.OpenWidget(params) Öffnet das Widget mit Deeplink-Parametern (siehe Abschnitt 3)
iResWidget.CloseWidget() Schließt das Widget
iResWidget.ToggleWidget() Öffnet das Widget, wenn es geschlossen ist, schließt es, wenn es geöffnet ist

Beispiel: Button mit onclick

<button onclick="iResWidget.OpenWidget()">
    Jetzt reservieren
</button>

Beispiel: mehrere Buttons auf der Seite

<nav>
    <a href="#" onclick="iResWidget.OpenWidget(); return false;">
        Reservieren
    </a>
</nav>

<section class="hero">
    <h1>Willkommen in unserem Restaurant</h1>
    <button onclick="iResWidget.OpenWidget()">
        Jetzt reservieren
    </button>
</section>

<footer>
    <button onclick="iResWidget.OpenWidget()">
        Tisch reservieren
    </button>
</footer>

Beispiel: aus eigenem JavaScript

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Nach 5 Sekunden öffnen
    setTimeout(() => iResWidget.OpenWidget(), 5000);

    // An einen eigenen Button koppeln
    document.getElementById('mijn-knop').addEventListener('click', () => {
        iResWidget.OpenWidget();
    });
});
</script>

<button id="mijn-knop">Buchen Sie einen Tisch</button>

Alternative: über DOM-Referenz

Die Methoden open(), close() und toggle() sind auch auf dem HTML-Element selbst verfügbar:

<script>
const widget = document.querySelector('ires-native-widget');
widget.open();
widget.close();
widget.toggle();
</script>

3. Deeplink: Widget mit vorausgefüllten Daten öffnen

Das Widget kann mit optionalen Parametern geöffnet werden, die den Buchungsablauf vorausfüllen. Abhängig davon, wie viele Informationen Sie mitgeben, überspringt das Widget Schritte und navigiert direkt zum richtigen Bildschirm.

Verfügbare Parameter

Parameter Typ Beschreibung
productId number Produkt-ID zum Vorauswählen
date string Startdatum im Format YYYY-MM-DD (z. B. "2025-07-15")
dateTo string Enddatum im Format YYYY-MM-DD (für Tagesmodus)
persons number Anzahl der Personen
time string Gewünschte Startzeit im Format HH:MM (z. B. "14:00")

Alle Parameter sind optional. Sie können jede Kombination verwenden.

Was passiert bei welcher Kombination?

Mitgegebene Parameter Ergebnis
(keine) Widget öffnet sich auf dem Auswahlbildschirm
date, persons Auswahlbildschirm mit vorausgefülltem Datum und Personen
productId Produkt ist automatisch aufgeklappt, Zeitslots sichtbar
productId + time Auswahl wird übersprungen, direkt zu Optionen/Checkout
productId + date + persons + time Maximales Überspringen: direkt zu Optionen oder Checkout

Beispiel: Button mit Deeplink

<!-- Nur Datum und Personen einstellen -->
<button onclick="iResWidget.OpenWidget({ date: '2025-07-15', persons: 4 })">
    Für den 15. Juli reservieren (4 Personen)
</button>

<!-- Produkt vorauswählen -->
<button onclick="iResWidget.OpenWidget({ productId: 123 })">
    Diese Aktivität buchen
</button>

<!-- Vollständiger Deeplink: Produkt + Datum + Personen + Zeit -->
<button onclick="iResWidget.OpenWidget({ productId: 123, date: '2025-07-15', persons: 2, time: '14:00' })">
    Direkt für 14:00 Uhr buchen
</button>

Beispiel: über DOM-Referenz mit Deeplink

<script>
const widget = document.querySelector('ires-native-widget');
widget.open({
    productId: 123,
    date: '2025-07-15',
    persons: 2,
    time: '14:00'
});
</script>

Beispiel: Deeplink aus eigener Anwendung

<script>
// Aus einem Produktkatalog oder CMS
function boekProduct(productId, datum) {
    iResWidget.OpenWidget({
        productId: productId,
        date: datum,
        persons: 2
    });
}
</script>

<div class="product-card">
    <h3>Kanufahren auf der Amstel</h3>
    <button onclick="boekProduct(456, '2025-08-01')">Reservieren</button>
</div>

<div class="product-card">
    <h3>Stadtrundgang</h3>
    <button onclick="boekProduct(789, '2025-08-01')">Reservieren</button>
</div>

4. URL-Deeplink: Widget über Query-Parameter öffnen

Das Widget erkennt beim Laden der Seite automatisch Query-Parameter in der URL. Dies ermöglicht es, direkte Links zu teilen, die das Widget automatisch mit vorausgefüllten Daten öffnen.

Verfügbare URL-Parameter

Parameter Beschreibung
ires-product Produkt-ID
ires-date Startdatum (YYYY-MM-DD)
ires-dateTo Enddatum (YYYY-MM-DD)
ires-persons Anzahl der Personen
ires-time Startzeit (HH:MM)

Beispiele

https://mijnsite.nl/reserveren?ires-product=123&ires-date=2025-07-15&ires-persons=4&ires-time=14:00

Nur Datum und Personen:

https://mijnsite.nl/reserveren?ires-date=2025-07-15&ires-persons=2

Nur Produkt (Widget öffnet sich mit aufgeklapptem Produkt):

https://mijnsite.nl/reserveren?ires-product=123

Verwendung in E-Mails oder Marketing

Diese URLs sind ideal für:

  • E-Mail-Kampagnen: direkter Link zu einem bestimmten Produkt + Datum
  • Social Media: "Buchen Sie direkt über diesen Link"
  • QR-Codes: Besucher scannen und gelangen direkt in den richtigen Buchungsablauf

5. Content Security Policy (CSP)

Wenn die Website eine strikte Content Security Policy verwendet, benötigt das Widget eine Nonce, um Inline-Styles zuzulassen. Ohne Nonce werden die Styles des Widgets blockiert.

Nonce an das Widget übergeben

Fügen Sie ein <meta>-Tag mit der servergenerierten Nonce oberhalb des Widget-Skripts hinzu:

<!-- Nonce generiert durch Ihren Server (z. B. PHP, Node.js, etc.) -->
<meta name="csp-nonce" content="abc123serverNonce">

<!-- Widget-Skript mit derselben Nonce -->
<script nonce="abc123serverNonce" src="https://wecloudit.i-reserve.net/iResController.js"></script>

Das Widget erkennt die Nonce automatisch über:

  1. <meta name="csp-nonce" content="...">-Tag
  2. Das nonce-Attribut am Skript-Element

Minimale CSP-Header

Das Widget benötigt mindestens die folgenden CSP-Direktiven:

style-src 'self' 'nonce-<nonce>';
script-src 'self' 'nonce-<nonce>';
font-src 'self' data:;
connect-src 'self' https://*.i-reserve.net;

Achtung: Font Awesome ist in das Widget-Bundle eingebaut (als Data-URI). Es sind keine externen Font-/Stylesheet-Requests an CDNs erforderlich.

6. Styling

Das Widget bringt seine eigenen Stile über Shadow DOM mit und passt sich automatisch auf Basis der Design-Einstellungen im Admin-Panel an (primaryColor, backgroundColor, textColor, etc.).

Der Floating Button steht standardmäßig unten rechts (position: fixed; bottom: 20px; right: 20px). Auf Mobilgeräten (< 480px) passt sich das Widget automatisch auf die volle Breite an.

i-Reserve Gebruiker

Benutzer

Sind Sie Benutzer von i-Reserve und haben Sie mit alltäglichen Aufgaben rund um das Reservieren zu tun? Dann finden Sie hier sicher die Antworten auf Ihre Fragen.
i-Reserve Beheerder

Administrator

Sind Sie für die Einrichtung und Implementierung von i-Reserve verantwortlich? Dann finden Sie die Antworten für Ihre Aufgaben in dieser Kategorie.
i-Reserve Ontwikkelaar

Entwickler

Sind Sie Designer oder Programmierer und haben Sie mit dem Styling und/oder der Entwicklung des Frontends zu tun? Dann schauen Sie sich in dieser Kategorie um.