# VenueFlow boek-widget — starterpakketten

Eén **kern** (een web component), overal dezelfde look. De drie pakketten hieronder zijn dunne
wrappers die diezelfde kern insluiten — de widget hoef je dus maar één keer te
ontwerpen/onderhouden.

> De kern staat op **één** plek en wordt geserveerd vanaf de VenueFlow-site:
> `https://venueflow.nl/widget/venueflow-widget.js`. Dat is precies wat de wrappers inladen.
> De `api`-attribuut wijst naar waar de data-API draait (`https://api.venueflow.eu`).
> Bewerk dus dát bestand — er is bewust geen tweede kopie in deze map.

## De widget
Een compact boekproces: **wat** (faciliteit) → **wanneer** (datum + tijd) → **gegevens** →
boeken. Is er een prijs + Mollie-koppeling, dan wordt de klant doorgestuurd naar de betaling en
daarna teruggebracht naar je eigen `redirect`-pagina. Anders meteen een bevestiging.

Attributen: `tenant` (jouw slug, verplicht), `api` (API-basis-URL),
`variant` (`strip` = weekstrip · `calendar` = maandkalender · `timeline` = dagbalk),
`accent` (kleur), `radius` (hoekafronding in px), `name` (optionele venue-naam in de kop),
`locale` (`nl`/`en`), `redirect` (terugkeer-URL na betalen).

De drie **varianten** bepalen hoe de gast datum & tijd kiest:

| `variant` | Wat |
|-----------|-----|
| `strip` (standaard) | Horizontale weekstrip met pijltjes per week + tijd-tegels. Compact, top op mobiel. |
| `calendar` | Klassieke maandkalender; gesloten dagen gedimd, navigatie per maand. |
| `timeline` | De dag als tijd-balk waarin elk blok toont hoe vol het is, met snelkeuze-dagen + "andere datum". |

De kern wordt geserveerd door de VenueFlow-site: `https://venueflow.nl/widget/venueflow-widget.js`.

## Belangrijk: CORS
Zet je website-origin (bijv. `https://www.jouwvenue.nl`) op de **toegestane origins** van de
venue in de admin — anders blokkeert de browser de API-aanroep. Draait de widget op je eigen
**custom API-domein** (bijv. `boeken.jouwvenue.nl`, via de Eigen-domein-instelling), dan is het
same-origin en heb je geen CORS-config nodig.

## Installatie per platform

### 1. Los / plain HTML
```html
<venueflow-booking tenant="jouw-slug" api="https://api.venueflow.eu"></venueflow-booking>
<script src="https://venueflow.nl/widget/venueflow-widget.js"></script>
```

### 2. Nuxt 3 (Vue) — `nuxt/`
Kopieer `VenueflowBooking.vue` naar `components/`, zet in `nuxt.config.ts`
`vue.compilerOptions.isCustomElement` (zie het bestand), en gebruik
`<VenueflowBooking tenant="jouw-slug" api="https://api.venueflow.eu" />`.

### 3. Next.js (React) — `next/`
Kopieer `VenueflowBooking.tsx` naar `components/` (client-component) en gebruik
`<VenueflowBooking tenant="jouw-slug" api="https://api.venueflow.eu" />`.

### 4. WordPress — `wordpress/`
Zet de map `venueflow-booking/` in `wp-content/plugins/`, activeer de plugin, vul onder
**Instellingen → VenueFlow** je tenant + API-URL in, en plaats `[venueflow]` op een pagina.

## API waar de widget mee praat (publiek, per tenant)
- `GET  /api/site/facilities`
- `GET  /api/site/facilities/{id}/slots?date=YYYY-MM-DD`
- `POST /api/site/bookings`  → `{ slot_id, customer_name, customer_email, people, locale, redirect_url }`

De tenant gaat mee via de `X-Tenant`-header (dat doet de widget automatisch op basis van `tenant`).