Astro-integratie
Boekingen in een Astro-site
Niets aan nisebookings is Astro-specifiek, en daar gaat het om. Het boekingsformulier is een webcomponent dat zelf met de API praat, dus een volledig statische Astro-site is genoeg. Server-rendering en server-routes zijn optioneel: voor als je diensten op de server wil renderen of webhooks in je eigen project wil ontvangen.
Waarom het bij een statische site past
-
Geen backend aan jouw kant
Het boekingsformulier laadt van het CDN van nisebookings en roept de publieke API aan met de publieke sleutel van de site. Je build blijft statisch: geen adapter, geen serverless functie.
-
Jouw lettertypen en kleuren
Het component draait in een shadow DOM en neemt het lettertype van de pagina over. Kleuren, radius en witruimte zijn CSS-variabelen op het element.
-
Server-rendering als je wil
Op een server-gerenderde pagina haal je diensten op in de frontmatter en render je je eigen markup. Boeken gaat met een form-post of fetch, via dezelfde API als het boekingsformulier.
-
Webhooks naast je code
Een Astro-server-route (`export const POST`) ontvangt ondertekende webhooks en stuurt ze door naar een CRM, Slack of een spreadsheet.
Drie patronen
Kopiëren, plakken, aanpassen. De publieke sleutel staat in de accountinstellingen, bij Toegestane websites.
Statische pagina met het boekingsformulier
Twee regels in elk .astro-bestand, zonder eigen client-JavaScript. De snelste route, en het werkt met output: 'static'.
<script src="https://app.nisebookings.com/widget.js" defer></script>
<nise-booking data-key="YOUR_PUBLIC_KEY"></nise-booking>Diensten op de server gerenderd
Haal in de frontmatter kaarten, prijzen en duur op uit de publieke API. Houd het boekingsformulier voor de boekingsstap, of boek rechtstreeks via de publieke API.
---
// src/pages/book.astro — output: 'server' or 'hybrid'
const res = await fetch('https://app.nisebookings.com/api/public/YOUR_PUBLIC_KEY/services');
const { services } = await res.json();
---
<ul>
{services.map((s) => <li>{s.title} — {s.duration} min — € {s.price}</li>)}
</ul>
<script src="https://app.nisebookings.com/widget.js" defer></script>
<nise-booking data-key="YOUR_PUBLIC_KEY"></nise-booking>Een webhook-route
Ontvang boekingsgebeurtenissen in src/pages/api/webhooks.ts, controleer de handtekening met de gedocumenteerde verifier en stuur door wat je nodig hebt.
// src/pages/api/nisebookings.ts
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ request }) => {
const raw = await request.text();
// Verify the signature before trusting it — the webhooks guide has the
// verifier to copy (Standard Webhooks, HMAC-SHA256, raw body).
return new Response(null, { status: 200 });
};Eigen stijl
Zet --nb-accent, --nb-radius en de andere variabelen op het element of in je globale stylesheet. Het component neemt font-family, font-size en kleur van de pagina over, zodat het voelt als deel van de site en niet als een ingebed formulier.
<style>
nise-booking {
--nb-accent: #E8276B;
--nb-radius: 4px;
}
</style>Wat getest is
Wat wel en wat niet
Het uitvoerbare voorbeeld achter deze pagina is tegen een sandbox gecontroleerd. Het boekingsformulier toonde de catalogus. De server-gerenderde pagina boekte een echte afspraak en ving een tijdslot op dat intussen bezet was. De webhook-route accepteerde een correct ondertekende payload en weigerde een verkeerde. Niet getest: view transitions. Bij navigatie in de browser wordt het element opnieuw aangemaakt, dus probeer dat pad voordat je erop bouwt. Mis je iets? Stuur een mail.
Nu proberen, zonder account
curl -s -X POST https://app.nisebookings.com/api/sandbox
# → a 24-hour account with a public key and an API key.
# Mail is captured, payments are fake.Volgende stappen
-
Astro-voorbeeld
Een uitvoerbare Astro-app: het boekingsformulier op een statische pagina, een eigen server-gerenderde interface en een webhook-route.
-
Widgetreferentie
Elk attribuut, elke themavariabele en elk event, met de exacte embedregels.
-
Publieke API
Diensten, slots, prijzen, boekingen en betalingen, met OpenAPI 3.1.
-
Snelstart
Van leeg account naar een live boeking, stap voor stap.
-
Next.js-voorbeeld
Een uitvoerbaar project met een pagina met boekingsformulier, een eigen interface en een webhook-route.
Boekingen op je volgende site.
Begin gratis en bouw tegen een sandbox. Je betaalt zodra je klant echte boekingen krijgt.
Gratis account. Alleen een e-mailadres nodig.