Home Beheerder Widget en Buttons
Instructie

Snel op weg: de widget

De widget is een optie voor integratie met i-Reserve wanneer je klanten de mogelijkheid wil bieden om met i-Reserve te reserveren op je eigen pagina. Voorbeelden van de widget kan je vinden in de vergaderzalen demo (tab widget) en de rondleidingen demo (button widget). Deze handleiding begeleidt je bij het in gebruik nemen van de widget.

Als eerst maken we links maken voor de pagina's die de widget gaat tonen. De standaard widget heeft twee tabs, dus we kiezen hier twee pagina's voor. Dit kunnen bijvoorbeeld twee kalenderpagina's zijn of de lijst van producten en een contactformulier.

Als je de twee pagina's gekozen en eventueel gemaakt hebt, ga je in de configuratie van de omgeving naar Klant pagina > Content pagina's > Beheer pagina's. Hier kunnen nieuwe SEO links toegevoegd worden. Hieronder zijn twee belangrijke instellingen hierbij toegelicht.

Origineel

Vul bij Origineel in wat er achter de "/" staat na de domeinnaam.

  • Voor https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 vul je dus front?mod=form&form_id=7 in.

Alias

Vul hier in wat er achter de "/" moet komen. Dit kan bijvoorbeeld "contact" of "zalen" zijn. Als je "contact" kiest, is de pagina vanaf dan ook te bereiken via {jouw omgeving URL}/contact (op rondleidingen.i-reserve.net wordt dit bijvoorbeeld https://rondleidingen.i-reserve.net/contact)

Nu we de pagina's hebben die gebruikt gaan worden voor de widget, kunnen we de configuratie aan gaan maken. Hiervoor gaan we in de configuratie van de omgeving naar Klant pagina > Widget en buttons.

Voeg hier een nieuwe configuratie toe en kies voor het type Widget. Bij het widget type kan gekozen worden tussen een button widget of een tab widget.

Zoek bij tab één en tab twee de SEO links die we in de vorige stap aangemaakt hebben. Achter de naam staat hier [SEO].

In de velden tab één omschrijving en tab twee omschrijving zet je de namen die de tabs moeten krijgen.

Als je klaar bent met dit instellen klik je op de </> knop onderaan het blok. Hier vind je de tags die opgenomen moeten worden in de head en de body van de pagina op jouw website.

Als je de widget in meerdere talen wil gebruiken, zijn er een aantal extra stappen om te zetten om dit goed in te stellen.

Uitgebreidere beschrijvingen van deze onderdelen zijn te vinden in de vorige stappen.

SEO links

Door middel van de SEO links kunnen dezelfde pagina's in verschillende talen weergegeven worden.

Voor https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 zet je het volgende bij Origineel bij de SEO links:

  • Nederlands: front?mod=form&form_id=7&lang=nl
  • Engels: front?mod=form&form_id=7&lang=en
  • Duits: front?mod=form&form_id=7&lang=de

Zorg dat je bij de Alias verschillende aliassen gebruikt, bijvoorbeeld "contact", "contact-en" en "contact-de"

Widget configuraties

Maak voor elke taal een aparte widget configuratie aan, waar je de SEO links van die taal gebruikt.

Toevoegen aan jouw website

Kopieer voor een taal-specifieke configuratie de head en body tags. Zet deze vervolgens op de overeenkomende taal pagina's op je website.

Native Widget — Integratie handleiding

Instructies voor het plaatsen van de <ires-native-widget> op een website.

1. Widget op een pagina zetten

Voeg twee regels toe aan je HTML:

<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>

Vervang {configId} door het ID van je widget configuratie (te vinden in het admin panel).

Compleet voorbeeld

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mijn Restaurant</title>
    <script type="module" src="https://default.i-reserve.net/javascript/embed/iResController.js"></script>
</head>
<body>
    <h1>Welkom bij ons restaurant</h1>
    <p>Boek een tafel via de reserveringswidget rechtsonder.</p>

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

De widget verschijnt als een floating button rechtsonder op de pagina.

Attributen

Attribuut Verplicht Beschrijving
src ja URL naar de widget API (https://{domain}/api/rest/widget/{configId})
lang nee Taal: nl, en, de, fr. Standaard: automatisch op basis van browser taal

Voorbeeld met taal

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

2. Widget openen via JavaScript

De widget kan programmatisch geopend, gesloten en getoggled worden via de globale iResWidget namespace. Dit is handig voor custom "Reserveer nu" knoppen.

Globale namespace: iResWidget

Methode Beschrijving
iResWidget.OpenWidget() Opent de widget
iResWidget.OpenWidget(params) Opent de widget met deeplink parameters (zie sectie 3)
iResWidget.CloseWidget() Sluit de widget
iResWidget.ToggleWidget() Opent de widget als deze dicht is, sluit als deze open is

Voorbeeld: button met onclick

<button onclick="iResWidget.OpenWidget()">
    Reserveer nu
</button>

Voorbeeld: meerdere knoppen op de pagina

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

<section class="hero">
    <h1>Welkom bij ons restaurant</h1>
    <button onclick="iResWidget.OpenWidget()">
        Reserveer nu
    </button>
</section>

<footer>
    <button onclick="iResWidget.OpenWidget()">
        Tafel reserveren
    </button>
</footer>

Voorbeeld: vanuit eigen JavaScript

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Open na 5 seconden
    setTimeout(() => iResWidget.OpenWidget(), 5000);

    // Koppel aan een eigen knop
    document.getElementById('mijn-knop').addEventListener('click', () => {
        iResWidget.OpenWidget();
    });
});
</script>

<button id="mijn-knop">Boek een tafel</button>

Alternatief: via DOM referentie

De methoden open(), close() en toggle() zijn ook beschikbaar op het HTML element zelf:

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

3. Deeplink: widget openen met vooringevulde gegevens

De widget kan geopend worden met optionele parameters die de boekingsflow pre-fillen. Afhankelijk van hoeveel informatie je meegeeft, slaat de widget stappen over en navigeert direct naar het juiste scherm.

Beschikbare parameters

Parameter Type Beschrijving
productId number Product ID om te pre-selecteren
date string Startdatum in YYYY-MM-DD formaat (bijv. "2025-07-15")
dateTo string Einddatum in YYYY-MM-DD formaat (voor dag-modus)
persons number Aantal personen
time string Gewenste starttijd in HH:MM formaat (bijv. "14:00")

Alle parameters zijn optioneel. Je kunt elke combinatie gebruiken.

Wat gebeurt er per combinatie?

Meegegeven parameters Resultaat
(geen) Widget opent op het selectiescherm
date, persons Selectiescherm met vooringevulde datum en personen
productId Product is automatisch uitgeklapt, tijdslots zichtbaar
productId + time Selectie wordt overgeslagen, direct naar opties/checkout
productId + date + persons + time Maximale skip: direct naar opties of checkout

Voorbeeld: button met deeplink

<!-- Alleen datum en personen instellen -->
<button onclick="iResWidget.OpenWidget({ date: '2025-07-15', persons: 4 })">
    Reserveer voor 15 juli (4 personen)
</button>

<!-- Product pre-selecteren -->
<button onclick="iResWidget.OpenWidget({ productId: 123 })">
    Boek deze activiteit
</button>

<!-- Volledige deeplink: product + datum + personen + tijd -->
<button onclick="iResWidget.OpenWidget({ productId: 123, date: '2025-07-15', persons: 2, time: '14:00' })">
    Boek direct voor 14:00
</button>

Voorbeeld: via DOM referentie met deeplink

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

Voorbeeld: deeplink vanuit eigen applicatie

<script>
// Uit een productcatalogus of CMS
function boekProduct(productId, datum) {
    iResWidget.OpenWidget({
        productId: productId,
        date: datum,
        persons: 2
    });
}
</script>

<div class="product-card">
    <h3>Kanoën op de Amstel</h3>
    <button onclick="boekProduct(456, '2025-08-01')">Reserveer</button>
</div>

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

4. URL deeplink: widget openen via query parameters

De widget detecteert automatisch query parameters in de URL bij het laden van de pagina. Dit maakt het mogelijk om directe links te delen die de widget automatisch openen met vooringevulde gegevens.

Beschikbare URL parameters

Parameter Beschrijving
ires-product Product ID
ires-date Startdatum (YYYY-MM-DD)
ires-dateTo Einddatum (YYYY-MM-DD)
ires-persons Aantal personen
ires-time Starttijd (HH:MM)

Voorbeelden

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

Alleen datum en personen:

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

Alleen product (widget opent met product uitgeklapt):

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

Gebruik in e-mails of marketing

Deze URLs zijn ideaal voor:

  • E-mail campagnes: directe link naar een specifiek product + datum
  • Social media: "Boek direct via deze link"
  • QR-codes: bezoekers scannen en komen direct in de juiste boekingsflow

5. Content Security Policy (CSP)

Als de website een strikte Content Security Policy gebruikt, heeft de widget een nonce nodig om inline styles toe te staan. Zonder nonce worden de styles van de widget geblokkeerd.

Nonce doorgeven aan de widget

Voeg een <meta> tag toe met de server-gegenereerde nonce, boven het widget script:

<!-- Nonce gegenereerd door je server (bijv. PHP, Node.js, etc.) -->
<meta name="csp-nonce" content="abc123serverNonce">

<!-- Widget script met dezelfde nonce -->
<script nonce="abc123serverNonce" src="https://wecloudit.i-reserve.net/iResController.js"></script>

De widget detecteert automatisch de nonce via:

  1. <meta name="csp-nonce" content="..."> tag
  2. Het nonce attribuut op het script element

Minimale CSP headers

De widget heeft minimaal de volgende CSP directives nodig:

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

Let op: Font Awesome is ingebouwd in de widget bundle (als data URI). Er zijn geen externe font/stylesheet requests naar CDNs nodig.

6. Styling

De widget brengt zijn eigen stijlen mee via Shadow DOM en past zich automatisch aan op basis van de thema-instellingen in het admin panel (primaryColor, backgroundColor, textColor, etc.).

De floating button staat standaard rechtsonder (position: fixed; bottom: 20px; right: 20px). Op mobiel (< 480px) past de widget zich automatisch aan naar volle breedte.

i-Reserve Gebruiker

Gebruiker

Ben je een gebruiker van i-Reserve en heb je te maken met alledaagse zaken rondom reserveren? Dan vind je hier vast de antwoorden op je vragen.
i-Reserve Beheerder

Beheerder

Ben je verantwoordelijk voor de inrichting en implementatie van i-Reserve? Dan vind je de antwoorden voor jouw taken in deze categorie.
i-Reserve Ontwikkelaar

Ontwikkelaar

Ben je ontwerper of programmeur en heb je te maken met de styling en/of ontwikkeling van de frontend? Kijk dan eens rond in deze categorie.