Boekingswidget SDK

<script src="https://tillor.eu/booking-sdk.js"></script>
<script>
  const booking = Tillor.booking({
    orgId: "org_abc123",
    widgetKey: "bwk_xxx",
    locale: "nl",
  });
</script>

{
  terrainTypeId: "tty_chalet",          // id uit getConfig().accommodations
  checkIn: "2026-07-10",
  checkOut: "2026-07-17",
  party: { adults: 2, children: 1, toddlers: 0, animals: 0 },
  extras: [{ extraId: "bk_extra_linnen", quantity: 3 }],   // optioneel
  partySegments: [],                    // optioneel: ander gezelschap voor een deel van het verblijf
  promoCode: "ZOMER10",                 // optioneel
}

booking.on("*", (data, name) => console.log(name, data));
booking.track("tillor_booking_select_dates", { checkIn, checkOut, nights: 7 });

<div id="accommodations"></div>
<label>Aankomst <input id="check-in" type="date" /></label>
<label>Vertrek <input id="check-out" type="date" /></label>
<label>Volwassenen <input id="adults" type="number" min="1" value="2" /></label>
<pre id="quote"></pre>

<script src="https://tillor.eu/booking-sdk.js"></script>
<script>
  const booking = Tillor.booking({ orgId: "org_abc123", widgetKey: "bwk_xxx", locale: "nl" });
  const state = { terrainTypeId: null, config: null };

  const money = (amount) =>
    new Intl.NumberFormat("nl", { style: "currency", currency: state.config.currency }).format(amount);

  async function start() {
    state.config = await booking.getConfig();
    const today = booking.dates.today(state.config.timeZone);
    document.getElementById("check-in").value = booking.dates.addDays(today, 14);
    document.getElementById("check-out").value = booking.dates.addDays(today, 17);

    const list = document.getElementById("accommodations");
    for (const accommodation of state.config.accommodations) {
      const button = document.createElement("button");
      button.textContent = `${accommodation.name} · vanaf ${money(accommodation.fromPricePerNight ?? 0)} per nacht`;
      button.addEventListener("click", () => {
        state.terrainTypeId = accommodation.id;
        booking.track("tillor_booking_select_accommodation", { terrainTypeId: accommodation.id });
        refresh();
      });
      list.appendChild(button);
    }
  }

  async function refresh() {
    const checkIn = document.getElementById("check-in").value;
    const checkOut = document.getElementById("check-out").value;
    const adults = Number(document.getElementById("adults").value);
    const output = document.getElementById("quote");
    if (!state.terrainTypeId || !checkIn || !checkOut) return;

    try {
      const quote = await booking.quote({
        terrainTypeId: state.terrainTypeId,
        checkIn,
        checkOut,
        party: { adults },
      });
      if (!quote.available) {
        output.textContent = `Volzet. Vrij: ${quote.alternatives.map((a) => `${a.checkIn} → ${a.checkOut}`).join(", ")}`;
        return;
      }
      if (!quote.valid) {
        output.textContent = `Niet mogelijk: ${quote.issues.map((issue) => issue.code).join(", ")}`;
        return;
      }
      output.textContent = quote.lines
        .map((line) => `${line.label ?? line.kind}: ${money(line.total)}`)
        .concat(`Totaal: ${money(quote.total)}`)
        .join("\n");
    } catch (error) {
      output.textContent = error.message;
    }
  }

  for (const id of ["check-in", "check-out", "adults"]) {
    document.getElementById(id).addEventListener("change", refresh);
  }
  start();
</script>

const result = await booking.createBooking(
  {
    terrainTypeId: state.terrainTypeId,
    checkIn,
    checkOut,
    party: { adults },
    guest: { firstName: "Jan", lastName: "Janssens", email: "jan@voorbeeld.be", phone: "+32 470 12 34 56" },
    acceptTerms: true,
    expectedTotal: quote.total,
  },
  { redirect: true }, // bij Direct boeken meteen naar Mollie
);
// Bij een aanvraag: toon result.manageUrl, de boekingspagina van de gast

try {
  await booking.quote(input);
} catch (error) {
  if (error instanceof Tillor.BookingError && error.status === 400) {
    console.log(error.issues); // [{ field: "checkOut", message: "checkOut must be after checkIn" }]
  }
}

POST https://tillor.eu/api/orgs/org_abc123/booking/widget/quote
X-Tillor-Booking-Widget-Key: bwk_xxx
Content-Type: application/json

{ "terrainTypeId": "tty_chalet", "checkIn": "2026-07-10", "checkOut": "2026-07-17", "party": { "adults": 2 } }