How to Embed a Booking System in Your App — Complete Developer Guide

1. Build vs Buy: Should You Build Your Own Booking System?

Every team considers building their own booking system at some point. After all, how hard can availability and scheduling be? The reality is more nuanced.

2. API-First vs Iframe Embedding

Not all "embed booking" approaches are equal. There are fundamentally two ways to add booking to your app:

For developer-built apps, API-first embedding is almost always the right choice. It gives you full ownership of the user experience while the API handles the complex scheduling logic, payment processing, and webhook delivery.

3. Prerequisites & Setup

Before you start, you need:

• curl (or Python 3.8+ / Node.js 18+) to follow the code examples
• An AvailEngine account — sign up free at api.availengine.com
• Your API key from the Developer Portal

The AvailEngine sandbox lets you test without any setup. Here's the sandbox base URL:

# Sandbox (no API key needed)
SANDBOX_URL=https://api.availengine.com/v1/sandbox

# Production (requires API key)
PROD_URL=https://api.availengine.com/v1

4. Step 1: Create Resources with the API

Every booking in AvailEngine is tied to a resource — the thing being booked (a meeting room, a stylist, a car wash bay). Let's create one:

# Create a resource (sandbox)
curl -X POST https://api.availengine.com/v1/sandbox/resources \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Consultation Room A",
    "type": "meeting_room",
    "timezone": "Europe/Berlin",
    "slot_duration_minutes": 30,
    "buffer_minutes": 15,
    "daily_start": "09:00",
    "daily_end": "17:00"
  }'

Response:

{
  "id": "res_abc123",
  "name": "Consultation Room A",
  "type": "meeting_room",
  "slot_duration_minutes": 30,
  "buffer_minutes": 15,
  "daily_start": "09:00",
  "daily_end": "17:00",
  "timezone": "Europe/Berlin"
}

5. Step 2: Query Availability Slots

Now that you have a resource, check its availability for a given date range:

# Get available slots for the next 7 days
curl "https://api.availengine.com/v1/sandbox/availability?resource_id=res_abc123&date_from=2026-07-22&date_to=2026-07-29"

Response:

{
  "slots": [
    {
      "start": "2026-07-22T09:00:00+02:00",
      "end": "2026-07-22T09:30:00+02:00",
      "available": true
    },
    {
      "start": "2026-07-22T09:45:00+02:00",
      "end": "2026-07-22T10:15:00+02:00",
      "available": true
    }
    // ... more slots
  ]
}

Notice the 15-minute buffer between slots — configured when you created the resource. AvailEngine handles buffer times, overlapping bookings, and recurring availability windows automatically.

6. Step 3: Create a Booking

Now let's create a booking in three languages. Each example creates the same booking — a 30-minute session in Consultation Room A.

curl

curl -X POST https://api.availengine.com/v1/sandbox/bookings \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: unique-req-id-001" \
  -d '{
    "resource_id": "res_abc123",
    "start_time": "2026-07-22T09:00:00+02:00",
    "end_time": "2026-07-22T09:30:00+02:00",
    "customer": {
      "name": "Alice Johnson",
      "email": "alice@example.com",
      "phone": "+49123456789"
    },
    "notes": "Initial consultation"
  }'

Python

import requests
import uuid

BASE_URL = "https://api.availengine.com/v1/sandbox"

booking = requests.post(
    f"{BASE_URL}/bookings",
    headers={
        "Content-Type": "application/json",
        "Idempotency-Key": str(uuid.uuid4()),
    },
    json={
        "resource_id": "res_abc123",
        "start_time": "2026-07-22T09:00:00+02:00",
        "end_time": "2026-07-22T09:30:00+02:00",
        "customer": {
            "name": "Alice Johnson",
            "email": "alice@example.com",
        },
        "notes": "Initial consultation",
    },
).json()

print(booking)
# { "id": "bkg_xyz789", "status": "confirmed", ... }

Node.js

const BASE_URL = "https://api.availengine.com/v1/sandbox";
const crypto = require("crypto");

const response = await fetch(`${BASE_URL}/bookings`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID(),
  },
  body: JSON.stringify({
    resource_id: "res_abc123",
    start_time: "2026-07-22T09:00:00+02:00",
    end_time: "2026-07-22T09:30:00+02:00",
    customer: { name: "Alice Johnson", email: "alice@example.com" },
    notes: "Initial consultation",
  }),
});

const booking = await response.json();
console.log(booking);
// { id: "bkg_xyz789", status: "confirmed", ... }

7. Step 4: Handle Webhooks & Stripe Deposits

Booking systems are event-driven by nature. AvailEngine sends HMAC-signed webhooks for 10+ event types including:

• booking.created — a new booking was confirmed
• booking.cancelled — a booking was cancelled
• booking.rescheduled — time slot changed
• deposit.collected — Stripe deposit was successfully charged
• deposit.refunded — deposit was returned on cancellation

Here's how to verify a webhook signature in Node.js:

const crypto = require("crypto");

function verifyWebhook(payload, signature, secret) {
  const expected = crypto
    .createHmac("sha256", secret)
    .update(JSON.stringify(payload))
    .digest("hex");
  return crypto.timingSafeEqual(
    Buffer.from(expected),
    Buffer.from(signature)
  );
}

// Usage in your webhook endpoint
app.post("/webhooks/availengine", (req, res) => {
  const signature = req.headers["x-availengine-signature"];
  if (!verifyWebhook(req.body, signature, process.env.WEBHOOK_SECRET)) {
    return res.status(401).send("Invalid signature");
  }
  // Process the webhook event
  handleBookingEvent(req.body);
  res.status(200).send("OK");
});

Stripe deposits are handled at booking creation. Pass a deposit amount and the API handles the Stripe PaymentIntent lifecycle — authorization, capture, and refund — with proper idempotency for payment retries.

8. Step 5: Build Your Booking UI

With the API working, you now build a native booking UI in your app. A typical booking flow has these screens:

1. Service/Resource selector — List available resources (rooms, staff, time slots)
2. Date & Time picker — Fetch availability from the API, render your own calendar widget
3. Customer details form — Collect name, email, phone
4. Payment (optional) — Use Stripe Elements to collect payment, then create the booking with a deposit
5. Confirmation — Display booking details and sync to Google Calendar via AvailEngine

Because you own the UI, every element matches your brand — colors, fonts, spacing, animations. No iframe chrome, no third-party branding.

9. Next Steps & Production Deployment

You now have a working embedded booking system. Here's what to do next:

• Complete the official Getting Started guide →
• Set up your production API key in the Developer Portal
• Configure Stripe Connect to collect payments on bookings
• Enable Google Calendar sync for automatic calendar integration
• Set up webhook endpoints for real-time booking notifications
• Review pricing — Free €0/mo for 500 bookings, Scale €129/mo for 50k bookings