De boekknop op je website installeren

Hier heb je geen programmeur voor nodig, en je hoeft de code niet te begrijpen. Je kopieert twee stukjes tekst uit Rentalbuddy en plakt ze in je website. Deze gids legt precies uit waar elk stuk hoort en wat je doet als de knop niet verschijnt.

De twee stukken, en waarom je ze allebei nodig hebt

Stuk	Wat het doet	Waar het hoort
Boekingsmotorcode kopiëren (het script)	Laadt Rentalbuddy op je website	Eén keer voor de hele website, in je sitebrede code-/voettekstinstellingen
Knopcode kopiëren (de knop)	Markeert de exacte plek waar de knop moet verschijnen	Op de pagina waar je de knop wilt

Geen van beide werkt alleen. Het script zonder knopcode laadt Rentalbuddy maar toont niets. De knopcode zonder script laat een lege plek op de pagina achter. Dit is de meest voorkomende fout — operators kopiëren alleen de knopcode en vragen zich af waarom er niets gebeurt. (De enige uitzondering: links in e-mails om een boeking te ontgrendelen of te verlengen werken zonder knop.)

Voordat je begint

De boekknop wordt per locatie ingesteld, dus doe dit voor elke locatie die een knop op je website moet hebben.

Stap 1 — Open de instelling van de Boekknop

1. Open in het linkermenu Locaties.
2. Klik de locatie aan die je wilt.
3. Open het tabblad Boekknop.

Stap 2 — Kies hoe klanten boeken

Kies onder Waar boeken klanten? de optie Mijn eigen website.

Kies daarna onder Hoe boeken klanten via uw website? de optie Ingebed op uw website — dit is de optie die je de knopcode geeft. (De andere optie, Boekingslink, geeft je alleen een link naar een pagina die Rentalbuddy host en vergt helemaal geen code. Weet je niet zeker of je code kunt installeren, dan is dat een prima alternatief.)

Stap 3 — Vertel Rentalbuddy welke websitebouwer je gebruikt

Kies onder Welke websitebouwer gebruik je? je bouwer uit de lijst — WordPress (drie varianten), Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite), of Anders / ik weet het niet.

Dit verandert de code niet. Het verandert de instructies die bij elke stap worden getoond, zodat ze bij de menu's van jouw bouwer passen. Kies Anders / ik weet het niet als er niets past — je krijgt dan nog steeds algemene instructies.

Stap 4 — Voeg het script toe aan je website (één keer)

Klik in de stap Voeg de boekingsmotor toe aan uw website op Boekingsmotorcode kopiëren. Je krijgt één regel die er zo uitziet:

<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>

Gebruik altijd de kopieerknop in plaats van dit met de hand over te typen — de kopie geeft je het exacte adres dat jouw account gebruikt.

Plak hem in het sitebrede codegedeelte van je website, aan het einde van de body van de pagina. In websitebouwers heet dat veld meestal custom code, header/footer code, tracking scripts, of iets waarin "voor </body>" voorkomt. De eigen bewoording van Rentalbuddy bij deze stap: "Laadt Rentalbuddy op uw website. Voeg dit één keer per webadres toe."

Ruwweg waar je moet kijken in de gangbare bouwers (menunamen veranderen, dus behandel dit als startpunt):

• WordPress — WordPress heeft hier geen ingebouwd veld voor. De gids in het product raadt aan een kleine gratis plugin te installeren, zoals Insert Headers and Footers of WPCode, en het veld Footer / "voor </body>" daarvan te gebruiken. Gebruik je een cache-plugin, leeg dan de cache na het opslaan.
• Wix — Site & app settings → Custom code (soms onder Tracking & Analytics), plaatsing Body – end, toegepast op alle pagina's.
• Squarespace — Settings → Advanced → Code injection → Footer. Niet alle Squarespace-abonnementen bevatten code injection.

Sla daarna je site op en publiceer hem.

Plak het script maar één keer. Extra kopieën worden genegeerd, dus een dubbele kopie maakt niets stuk — maar het maakt de pagina trager en het wordt onduidelijk welke kopie je moet vervangen als je later de cookiebanner- of async-versie nodig hebt die verderop wordt beschreven. Weet je niet zeker of hij er al staat, zoek dan in je sitebrede codevelden naar rentalbuddy voordat je nog een kopie toevoegt.

Eén website met meerdere pagina's: plak hem één keer, sitebreed. Meerdere aparte websites: plak hem één keer op elke website.

Stap 5 — Vul je websiteadres in

In de stap Plaats de knop waar hij moet verschijnen vind je het veld URL waar de boekknop is geïmplementeerd. Vul het volledige adres in van de pagina waar je knop komt te staan — bijvoorbeeld https://jouwsite.nl/boeking.

Regels die het systeem afdwingt:

• Het moet beginnen met https:// of http://. Zonder dat mislukt het opslaan met "De URL moet beginnen met https:// of http://."
• Het mag geen ? bevatten. Dat gebeurt meestal als je een preview- of testlink plakt. Verwijder alles vanaf de ?.
• Het is verplicht. Zonder dit veld kun je de locatie in ingebedde modus niet opslaan.

Dit veld doet er meer toe dan het lijkt. Rentalbuddy bouwt de links die het in e-mails verstuurt — verhuur starten, terugbrengen, verlengen, verzetten — door dit adres te nemen en er informatie aan toe te voegen. Wijst het adres naar een pagina die de knopcode niet bevat, dan landen je klanten op die pagina en bereiken ze nooit hun pincode of de retourstap. Wijzig je het adres midden in het seizoen, dan wijzen al verzonden links naar de oude pagina.

Stap 6 — Zet de knop op de pagina

Klik, nog steeds in Plaats de knop waar hij moet verschijnen, op Knopcode kopiëren naast Standaardboeking. Je krijgt één regel als deze:

<div id="rentalbuddy-checkout" data-site="your-location-id"></div>

Plak hem in de pagina zelf — in een HTML-/Embed-/Codeblok in je pagina-editor, precies op de plek waar de knop moet verschijnen. Niet in de sitebrede instellingen; daar ging het script uit stap 4 naartoe.

Onder Geavanceerd (alleen indien nodig) staan nog twee knopcodes: Productboeking en Evenementenboeking. Gebruik die alleen als je locatie zowel producten als evenementen aanbiedt en je een knop wilt die de keuze overslaat. Anders is Standaardboeking de juiste.

Sla de pagina op en publiceer hem.

Stap 7 — Controleer het

1. Klik in Rentalbuddy op Opslaan.
2. Klik op Voorbeeld naast de boekingsoptie — dat opent je website in een nieuw tabblad met de boekingsflow, zodat je kunt controleren of het inbedden werkt.
3. Open je pagina ook gewoon, in een privé-/incognitovenster, zodat je hem ziet zoals een klant hem ziet en niet vanuit de cache.

De tekst en het uiterlijk van de knop

Twee dingen aan het uiterlijk van de knop verrassen bijna iedereen.

Stel je nooit een tekst in, dan zegt de knop BOOK — in hoofdletters. Dat is het ingebouwde standaardlabel, geen stijlkeuze die jij hebt gemaakt. Geef hem een fatsoenlijk label onder Knoptekst op hetzelfde tabblad:

• Voor deze locatie: zet Aanpassen voor deze locatie aan en vul Standaardtekst in. Onder Geavanceerde instellingen staan aparte velden Tekst voor product / Tekst voor evenement voor de geavanceerde knopcodes.
• Voor alle locaties tegelijk: gebruik Tekst voor account bewerken.

Twee gedragingen om te kennen. Staat Aanpassen voor deze locatie uit, dan worden de accountteksten gebruikt en worden de locatievelden niet eens getoond. En alle locatievelden leegmaken terwijl de schakelaar aanstaat, valt eveneens stilletjes terug op de accountteksten.

De stylesheet van je eigen website kan de knop herstylen. De knop is een gewoon knopelement op jouw pagina. Zijn kleuren en lettertypen worden rechtstreeks op het element gezet, dus gewone sitestijlen veranderen die niet — maar regels met !important, en eigenschappen die de knop zelf niet instelt (zoals tekst in hoofdletters zetten), komen er wél doorheen. Staat de tekst dus in hoofdletters terwijl je gewone letters hebt getypt, dan is dat de stylesheet van je site, niet Rentalbuddy. Gebruik Knopstijl (zelfde tabblad) om het uiterlijk expliciet in te stellen, en controleer het resultaat met Voorbeeld.

Wijzigingen in tekst en styling vereisen geen opnieuw kopiëren van code — ze worden actief na het herladen van de pagina.

Wat het rode teken echt betekent

Het tabblad Boekknop (en de kolom URL boekknop in de lijst met locaties) toont een rood teken tot de instelling compleet is — en verhuurders vechten er stelselmatig op de verkeerde plek tegen, door één misverstand:

Het rode/groene teken kijkt nooit naar je website. Rentalbuddy bezoekt je site niet en stelt niet vast of de code is geïnstalleerd. Het teken weerspiegelt alleen wat er in de admin is opgeslagen:

• Ingebed op uw website: groen zodra er een geldige URL waar de boekknop is geïmplementeerd is opgeslagen (begint met http(s)://, geen ?).
• Boekingslink: altijd groen.
• De optie voor een door Rentalbuddy gehoste website: groen zodra die website is aangezet.

Dus als het teken "rood blijft ook al staat de knop op onze site": de website is niet relevant — een niet-opgeslagen, leeg of ongeldig URL-veld is de oorzaak. Vul het in, druk op Opslaan, en het slaat om. De tooltip vertelt je in welk geval je zit: "Kies hoe klanten boeken en rond de instelling van de boekknop af." (niets gekozen of URL ontbreekt) of "De URL moet beginnen met https:// of http://." Omgekeerd bewijst een groen teken niet dat de code op je site staat — Voorbeeld is het middel dat je pagina echt opent en laat zien of de knop werkt.

Veelvoorkomende valkuilen

Een cookiebanner blokkeert het script

Gebruik je een cookiebanner, dan kan die het Rentalbuddy-script tegenhouden tot de bezoeker cookies accepteert — waardoor de knop laat of helemaal niet verschijnt. Rentalbuddy waarschuwt precies hiervoor: "Als de boekingsknop niet verschijnt en u een cookiebanner gebruikt, kan uw site het script blokkeren totdat bezoekers cookies accepteren."

Onder Geavanceerd (alleen indien nodig) → Cookie-toestemmingstools staan kant-en-klare versies van het script voor twee veelgebruikte tools: Kopiëren voor Cookiebot en Kopiëren voor OneTrust. Vervang het script dat je in stap 4 hebt geplakt door de passende versie.

Voor elke andere cookietool: markeer in de instellingen van je cookiebanner het boekingsscript (of de host plugin.rentalbuddy.io) als strikt noodzakelijk of essentieel. Je hoeft afzonderlijke cookies niet te hercategoriseren.

De knop verschijnt maar gedraagt zich vreemd

Onder Geavanceerd (alleen indien nodig) → Script laden kun je twee alternatieve versies van hetzelfde script kopiëren: Kopiëren met async en Kopiëren zonder defer. Probeer een van die twee in plaats van de standaardversie — en vervang ook hier de kopie die je al hebt geplakt, voeg er nooit een toe.

Je wilt een knop op een tweede pagina

Het script is al sitebreed geladen, dus je hebt alleen de knopcode nodig. Plak dezelfde knopcode in een HTML-/Embed-blok op de andere pagina.

Let op: het veld URL waar de boekknop is geïmplementeerd bevat één adres per locatie. Kies de pagina waar je klanten vanuit boekingsmails naartoe wilt sturen — dat is de pagina die de e-maillinks openen.

Je wilt een knop op een tweede taalversie van je pagina

Hetzelfde als hierboven: plak de knopcode in de taalversie van de pagina. Staat de tweede taal op een aparte website (een ander domein), dan heeft die website een eigen kopie van het script nodig.

Welke talen het boekingsvenster zelf aanbiedt, is een aparte instelling op de locatie — zie Accountinstellingen — waar elke instelling staat.

Je hebt meer dan één locatie

Elke locatie heeft een eigen knopcode (de waarde van data-site verschilt) en een eigen websiteadres. Kopieer de knopcode vanaf het eigen tabblad Boekknop van die locatie. Het script zelf is voor allemaal hetzelfde, dus dat gaat er nog steeds maar één keer per website in.

Checklist: de knop verschijnt niet

Werk deze lijst op volgorde af.

1. Zijn beide stukken geïnstalleerd? Het script in de sitebrede instellingen, en de knopcode op de pagina. Een ontbrekend script is de meest voorkomende oorzaak.
2. Heb je gepubliceerd? De meeste bouwers vragen een expliciete Publish/Update na het opslaan, en cache-plugins moeten geleegd worden.
3. Staat het script er meer dan één keer? Zoek in je sitebrede codevelden naar rentalbuddy. Verwijder alle kopieën op één na.
4. Staat de locatie op ingebed boeken? Open Locaties → de locatie → Boekknop en controleer dat Mijn eigen website → Ingebed op uw website is geselecteerd en opgeslagen. Toont het tabblad Boekknop een rode waarschuwing, dan is de opgeslagen instelling onvolledig — zie Wat het rode teken echt betekent hierboven; het gaat om het opgeslagen URL-veld, nooit om je website.
5. Is het websiteadres geldig? Het moet beginnen met https://, mag geen ? bevatten, en moet de pagina zijn die de knopcode ook echt bevat.
6. Blokkeert een cookiebanner het? Probeer de Cookiebot- of OneTrust-versie van het script, of markeer het als strikt noodzakelijk in je cookietool.
7. Probeer een andere laadoptie. Wissel het script om voor de versie met async of zonder defer.
8. Controleer op een telefoon en in een privévenster. Pagina's uit de cache en browserextensies kunnen hem verbergen.
9. Is er überhaupt iets te boeken? De knop kan correct geïnstalleerd zijn en toch niets te verkopen hebben als de locatie geen openingsperiode of geen producten heeft. De klant ziet in dat geval geen leeg venster — hij ziet "Dit verhuurstation is momenteel niet beschikbaar voor reserveren." met de contactgegevens van je locatie. Zie Openingstijden en openingsdata en Klanten zien geen beschikbare tijden, of helemaal geen producten.
10. Nog steeds vast? Stuur support je pagina-adres en zeg welke bouwer je gebruikt — de twee dingen die alles hierboven bepalen.