Documentatie
De boekingswidget plaatsen
Met één code-snippet zet je de Appointo-boekingswidget op elke website. Kopieer, plak en klanten boeken direct online — zonder dat ze je site verlaten.
Snel starten
In drie stappen live
Je hebt geen technische kennis nodig. Volg deze stappen en de widget staat binnen een paar minuten op je site.
- 1
Ga naar je dashboard
Log in en open Dashboard → Widget. Daar vind je de code die specifiek bij jouw organisatie hoort.
- 2
Kopieer je code
De widgetcode bevat al je eigen organisatie-slug. Kopieer het volledige fragment met één klik.
- 3
Plak vóór </body>
Plak de code in de HTML van je website, vlak vóór de afsluitende </body>-tag. Klaar — de widget verschijnt direct.
Plaats deze code vlak vóór de afsluitende </body>-tag:
<!-- Appointo boekingswidget -->
<div data-appointo-org="jouw-salon-slug"></div>
<script src="https://app.appointo.nl/widget.js" async></script>Vervang jouw-salon-slug door de slug van je eigen organisatie. Die vind je in Dashboard → Widget.
Opties
Data-attributen
Stuur het gedrag van de widget bij met deze optionele attributen op het container-element.
| Attribuut | Verplicht | Beschrijving |
|---|---|---|
data-appointo-org | Ja | Je organisatie-slug, zoals 'kapsalon-bloom'. Hiermee weet de widget welke agenda en diensten getoond worden. |
data-accent | Nee | Een hex-kleur (bijv. #0f766e) die de accentkleur op deze site overschrijft. Handig als je de widget op een afwijkend merk plaatst. |
data-service | Nee | Het id van een dienst die je vooraf wilt selecteren. De klant start dan meteen bij de juiste behandeling. |
data-mode | Nee | Bepaalt de weergave: 'inline' toont de widget in de pagina, 'popup' opent de widget in een venster. Standaard 'inline'. |
Weergave
Inline of popup
Kies hoe de widget op je pagina verschijnt.
- Inline toont de boekingswidget direct in je pagina, op de plek waar je het container-element zet. Ideaal voor een aparte "Afspraak maken"-pagina.
- Popup koppel je aan een knop. Pas wanneer een bezoeker erop klikt opent de widget in een venster — overzichtelijk voor je homepage of menubalk.
Voorbeeld van een popup-knop:
<!-- Knop die de widget als popup opent -->
<button data-appointo-org="jouw-salon-slug" data-mode="popup">
Plan een afspraak
</button>
<script src="https://app.appointo.nl/widget.js" async></script>Laat je data-mode weg, dan gebruikt de widget automatisch de inline-weergave.
Stijl
Uiterlijk aanpassen
Kleuren, teksten en de standaard accentkleur beheer je centraal in Dashboard → Widget. Wijzigingen die je daar opslaat, gelden meteen overal waar je widget staat — je hoeft de code op je site niet opnieuw te plakken.
Wil je op een specifieke website een andere kleur? Geef dan een data-accent mee met een hex-kleur. Dat attribuut overschrijft de dashboard-instelling alleen op die pagina, zodat de widget perfect bij dat merk past.
Zonder embed
Directe boekingslink
Geen website om de widget op te plaatsen? Deel dan gewoon een directe link naar je boekingspagina.
Elke organisatie heeft een eigen boekingspagina die zonder code werkt. Plak de link in je Instagram-bio, op je Google-bedrijfsprofiel, in een WhatsApp-bericht of in een e-mailhandtekening — klanten boeken er direct.
https://app.appointo.nl/jouw-salon-slugVervang jouw-salon-slug door je eigen organisatie-slug.
FAQ
Veelgestelde vragen
- Werkt de widget op Wix, WordPress en Squarespace?
- Ja. De widget werkt overal waar je een stukje HTML of een script-element kunt plakken. Dat geldt voor WordPress, Wix, Squarespace, Shopify, Webflow en vrijwel elke andere bouwer of zelfgebouwde site.
- Laadt de widget snel?
- Ja. Het script laadt asynchroon (async), dus het blokkeert je pagina niet. Bezoekers zien je website direct; de boekingswidget verschijnt zodra hij geladen is.
- Kan ik meerdere widgets op één site plaatsen?
- Dat kan. Plaats simpelweg meerdere container-elementen, elk met hun eigen data-appointo-org. Zo toon je bijvoorbeeld verschillende vestigingen of merken op één pagina.
- Heb ik technische kennis nodig?
- Nee. Het komt neer op kopiëren en plakken. Kom je er niet uit, dan helpt ons team je graag of plaatsen we de widget voor je tijdens het bouwen van je website.
Hulp nodig bij het plaatsen?
Kom je ergens niet uit? In het helpcentrum vind je stap-voor-stap uitleg, of neem direct contact met ons op. We denken graag mee.
Laat je een nieuwe website bouwen? Fourwrd plaatst de Appointo-widget dan kosteloos voor je mee, zodat je site meteen klaar is om afspraken te ontvangen.