Hoe voeg ik de widget toe aan een HTML- of PHP-website?

Voor een website zonder WordPress

Je hoeft geen WordPress-plugin of eigen boekings-API te bouwen. Het officiële widgetscript opent de Resevu-boekingsflow en gebruikt de behandelingen en beschikbaarheid van je werkruimte. Bekijk eerst de demo.

Vraag je werkruimteslug, gewenste taal en thema op. Laat je Resevu-admin ook de exacte website-origin toelaten bij Instellingen → Online kanalen. Bijvoorbeeld https://www.jouwwebsite.be, zonder paginapad. Een andere host, protocol of poort is een andere origin. Gebruik nooit demo als productieconfiguratie en deel geen wachtwoorden of geheime API-sleutels.

Script en knop plaatsen

Dit is een voorbeeld: vervang JOUW-WERKRUIMTESLUG door je eigen slug. nl is de taal en oasis is een widgetthema; kies een thema uit Resources.

<div class="resevu-booking-widget">Boek nu</div>

<script src="https://www.resevu.com/widget/widget.js"
  data-tenant="JOUW-WERKRUIMTESLUG"
  data-language="nl"
  data-template="oasis"></script>

1. Plaats de div waar de boekingsknop moet staan, bijvoorbeeld bij je behandelingen.
2. Plaats het script één keer onder de placeholder, vóór de afsluitende </body>-tag.
3. In een PHP-website kun je het script in de gedeelde footer-template opnemen. Controleer dat het niet nogmaals door een andere template wordt geladen.
4. Open de pagina via je website-URL, niet rechtstreeks als lokaal bestand. Controleer dat de knop verschijnt en de boeking opent.

Resevu genereert de zichtbare knop in de wrapper. Zonder placeholder kan het script automatisch een knop plaatsen. Gebruik de wrapperklasse niet op een bestaande knop.

Je eigen knop behouden

Behoud het script hierboven, maar vervang de placeholder door een echte knop:

<button type="button" onclick="window.openServiceModal()">
  Boek nu
</button>

De functie is beschikbaar nadat het script geladen is. Behoud een duidelijke naam en zichtbare toetsenbordfocus. WordPress-shortcodes werken niet in gewone HTML- of PHP-templates.

Met AI laten uitvoeren

Kopieer de HTML/PHP-prompt bij Resources. Geef de relevante pagina- of templatebestanden, je werkruimteslug en de gewenste plaats van de knop. Vraag om gerichte wijzigingen, niet om een volledige herbouw van je website. Laat de AI niets publiceren of echt boeken zonder je akkoord.

Controleren en fouten oplossen

Test desktop, mobiel en toetsenbordbediening. Controleer behandelingen, duurtijden, medewerkers en momenten. Test echte boekingen of betalingen niet ongemerkt: gebruik een geschikte testomgeving.

• Invalid tenant: controleer de exacte werkruimteslug.
• Website geweigerd: laat de admin de exacte origin controleren, inclusief www, protocol en eventuele poort.
• Geen knop of knop reageert niet: controleer of het script één keer geladen is en of browserbeveiliging of je Content Security Policy het script of de verbinding blokkeert. Laat je websitebouwer de benodigde domeinen gericht toelaten; schakel de beveiliging niet volledig uit.
• Geen beschikbare momenten: laat de admin behandelingen, medewerkerroosters, openingsuren en boekingsregels nakijken.

Meer voorbeelden staan in de technische installatiegids.