# BookingPro

A Calendly-style booking widget for Framer. Visitors pick a date and time on your own site and submit their details — fully branded, on your own domain, with no monthly subscription. Drop it in, paste your Formspree ID, optionally connect a Google Sheet that holds your taken slots, and you're live.

---

## Why You'll Like It

- Calendly-style booking without the monthly fee. A polished date+time picker that lives on your own domain, with your own brand. One-time purchase instead of a per-seat subscription.

- Friendly booking horizon. Pick "1 month from today", "3 months", "1 year" — no need to think in raw days. Calendar math is correct (1 month = the same day next month, not 30 days).

- Pick your week start. Monday (Europe / ISO, default), Sunday (US), or Saturday (Middle East). The grid and weekday labels rotate automatically.

- Four booking modes built in. Single appointment, multi-time block, hotel-style date range (check-in / check-out), or multiple independent dates. One component, all the use cases.

- Three ways to know what's already taken. Edit the booked list right in Framer, or sync from a Google Sheet, or pull from any JSON URL.

- Already-booked slots are visually clear. Taken slots are grayed out and show your custom message — no double bookings.

- Truly customizable form. You decide which fields to ask: name, email, phone, project description, anything.

- Sends straight to Formspree (or any webhook). The chosen date(s) and time(s) are added to the payload automatically.

- Designer-first. Four ready-made presets (Modern, Minimal, Soft, Dark), every color editable, every label rewriteable. Korean / Japanese / Spanish weekday and month names just need a quick paste.

- No code, no plugins, no CMS. No CMS dependency — booking data comes from your panel or a URL you choose.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL. To bring it into Framer:

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page. Drag it, resize it, and configure it from the right-side property panel.

---

## Four Booking Modes

Pick one in the Booking Mode dropdown at the top of the property panel.

### Date + Single Time

Classic Calendly-style. User picks a date, then one time slot. Best for: 1-on-1 calls, consultations, demos, photo shoots.

### Date + Multiple Times

User picks a date, then any number of time slots in that day. Optional Consecutive Only toggle requires the picked slots to be adjacent — perfect for "book a 2-hour studio block" or "book lunch + the meeting after".

### Date Range (Check-in / Check-out)

Hotel-style. User picks a start date (check-in), then an end date (check-out). The whole range highlights, the form summary shows the night count. Best for: lodging, multi-day rentals, conference room reservations.

### Multiple Dates

User picks any number of independent days. Best for: "select all the dates you're available", workshop signups with optional days, photo session day picker.

The booked list works for all modes. In date-only modes (range / multi-date), any taken date in your sheet blocks that whole day.

---

## Setup in 60 Seconds

1. Drop the component on your canvas.

2. Open the property panel on the right.

3. Availability — set your working days, hours, and slot length (e.g. Mon–Fri, 9–18, 30-minute slots).

4. Form Fields — add the questions you want to ask the visitor.

5. Submission — pick Formspree, paste your form ID. Done.

Optional but powerful: set Existing Bookings → Source to Google Sheet and paste a published CSV URL so booked slots come straight from your spreadsheet.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — pick a look in one click (Modern / Minimal / Soft / Dark / Custom).

- Availability — working days (1=Mon, 2=Tue…), hours, slot length, lunch break, holidays, timezone label.

- Existing Bookings — pick how to sync taken slots: manual list, Google Sheet, or JSON URL.

- Form Fields — add any number of fields with id, label, type, placeholder, and required flag.

- Submission — Formspree ID, Webhook URL + Allowed Domains, email subject, the keys used for date/time in the payload.

- Messages — every visible string. Translate to any language, change the booked-slot warning, the success message, the back/submit labels — anything.

- Calendar Style — header, weekday labels, date colors, today ring, booked-slot dot color.

- Slots Style — slot colors (default / hover / selected / booked), columns, padding, radius.

- Form Style — input colors, label color, font sizes, spacing.

- Buttons — primary and secondary button colors, radius, padding, weight.

- Container — background, border, radius, summary pill, progress bar.

Most designers only touch a few of these. Pick a preset, edit your fields, ship.

---

## Three Ways to Track Booked Slots

You decide where the list of "already taken" times lives.

### 1. Manual List

Type slots into the property panel. Best for solo founders or low-volume use.

### 2. Google Sheet (CSV)

Step 1 — Create the sheet. Open a new Google Sheet and add two column headers in the first row: `date` and `time`. Then list each booked slot as one row:

| date | time |

|------|------|

| 2026-05-15 | 10:00 |

| 2026-05-15 | 14:00 |

| 2026-05-16 | 11:00 |

Format rules:

- date in `YYYY-MM-DD` format (e.g. `2026-05-15`)

- time in 24-hour `HH:MM` format (e.g. `10:00`, `14:30`)

- One booking per row

Step 2 — Publish the sheet as CSV. In Google Sheets:

1. File → Share → Publish to web

2. Choose your sheet, format Comma-separated values (.csv), click Publish

3. Copy the URL Google gives you

4. Paste into the Sheet CSV URL field in the property panel

The component re-checks the sheet on load (and optionally every N seconds). Add or remove a row in the sheet and the website updates without redeploying. Beautiful for a small team where someone manages bookings in Sheets.

For date-only modes (Date Range / Multiple Dates): the `time` column is still required, but the value is ignored — you can put anything (e.g. `00:00`). One row per blocked day.

### 3. Custom JSON URL

For anyone with a backend or automation. Point it at any URL that returns JSON like:

```json

[

{ "date": "2026-05-15", "time": "10:00" },

{ "date": "2026-05-15", "time": "14:00" }

]

```

or `{ "bookings": [...] }` or `{ "data": [...] }`. The component handles all three shapes.

---

## What the Booked Slot Behavior Looks Like

When a slot is already taken:

- It appears grayed out in the time grid

- The clickable behavior depends on Disable Booked Slots:

- On (default): the slot can't be clicked at all

- Off: clicking it shows your custom Booked Slot Message ("Sorry, this time is already taken — please pick another")

You write the message in any language you want, with any tone. The default is friendly: "This slot is already taken. Please pick another time."

---

## Where Your Data Goes

When the user submits, the component sends a JSON `POST` to your endpoint with all the fields they filled in plus the chosen date and time.

### Formspree

Endpoint: `https://formspree.io/f/{your-form-id}`. You only paste the form ID (e.g. `xnqklbpr`) — not a full URL. The component builds the HTTPS endpoint for you.

### Webhook (POST)

Any URL that accepts a JSON body — Zapier, Make, n8n, your own server, Notion via integrations, Airtable, Slack incoming webhooks. Two rules:

1. HTTPS only. `http://` URLs are rejected.

2. List the allowed domains. In the Submission group, fill Allowed Domains with a comma-separated list of the hosts you trust, e.g. `hooks.zapier.com, hook.us1.make.com, your-backend.com`. The component refuses to POST anywhere else. Subdomains count (so `hook.us1.make.com` covers `*.hook.us1.make.com` as well).

This keeps visitor data safe: if a webhook URL is ever changed by mistake (or by someone you didn't authorize), submissions won't silently leak to an unknown server.

### Payload Shape

The exact keys depend on the Booking Mode you chose. Custom form field IDs always come through. Here are the extras the component adds automatically:

Date + Single Time (default)

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"time": "14:00",

"_subject": "New booking request"

}

```

Date + Multiple Times

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"time": "14:00",

"times": "14:00, 14:30, 15:00",

"_subject": "..."

}

```

Date Range (Check-in / Check-out)

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"checkOut": "2026-05-18",

"nights": "3",

"dates": "2026-05-15, 2026-05-16, 2026-05-17, 2026-05-18",

"_subject": "..."

}

```

Multiple Dates

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"dates": "2026-05-15, 2026-05-22, 2026-06-05",

"_subject": "..."

}

```

All key names (`date`, `time`, `checkOut`, `nights`, `dates`, `times`) are configurable in the Submission group, in case your tool expects different names.

If your endpoint replies with a non-2xx status, the component shows your Error Message with a Back button so the user can try again.

---

## Great For

- 1-on-1 consultations and discovery calls

- Coaching sessions and tutoring

- Photo / video shoot booking

- Studio / equipment rental

- Salon / clinic appointments (with the holiday list filled in)

- Hotels, B&Bs, and lodging with check-in / check-out (range mode)

- Multi-day rentals and tour bookings

- Workshop / class registration with optional days (multi-date mode)

- Internal demos and sales calls

- Real estate viewings

- Anywhere you currently bounce between emails to schedule, or pay $10–30/month for a tool you barely use

---

## Power It Up With Your Favorite Tools

BookingPro sends a clean JSON payload to Formspree or any webhook, so it slots straight into the workflow you already have:

- Zapier / Make / n8n — Auto-send a confirmation email to the visitor, push the booking into Google Sheets, create a Notion page, or message a Slack channel.

- Google Calendar / Outlook — Add a Zapier step to create a calendar event the moment a booking lands.

- Gmail / SendGrid / Resend — Trigger a branded confirmation email from your own address.

- Stripe / PayPal — For paid bookings, wire the webhook to a payment link and unlock the calendar event after checkout.

- Your own server — Point the webhook at any HTTPS endpoint that accepts a JSON `POST`. Total control.

Because the data comes through as a regular `POST`, every "what if I want X to happen automatically" question has an answer.

---

## A Few Tips

- For consultations, set Slot Length to 30 or 60 and keep Working Days to weekdays only.

- If you allow same-day bookings, set Min Days Ahead to 0. To require a day's notice, set it to 1.

- Use Holidays for fixed off-days (e.g. `2026-12-25, 2026-01-01`).

- Korean labels: paste `1월, 2월, 3월, 4월, 5월, 6월, 7월, 8월, 9월, 10월, 11월, 12월` into Month Labels and `월, 화, 수, 목, 금, 토, 일` into Weekday Labels.

- For Google Sheet sync, keep your sheet really simple — just `date` and `time` columns. Anything else is ignored.

- Test once with Submission → Send To = None to walk through the flow without sending anything.

---

## Need Help?

If a submission isn't arriving, check that:

- The Formspree ID is just the ID (e.g. `xnqklbpr`), not the full URL.

- Formspree has confirmed your sender email (they email you once after the first submission).

- Your webhook (if using one) is HTTPS and the host is listed in Allowed Domains (comma-separated, e.g. `hooks.zapier.com, hook.us1.make.com`).

- Your webhook responds with a 2xx status.

If you see a red error banner on the Framer canvas:

- That banner shows up only while you're designing — it's a heads-up that the Google Sheet / JSON URL didn't load. Visitors will never see it.

- Click Retry to re-fetch without touching the property panel.

- Common cause: the Sheet wasn't published as CSV, or the JSON URL returned a non-2xx status.

If booked slots aren't grayed out:

- The Sheet URL must be the published CSV URL (ends with `output=csv`), not the regular sheet URL.

- The column headers in your sheet should match what you typed in Date Column and Time Column (default `date` and `time`).

- Dates should be in `YYYY-MM-DD` format. The component also accepts `MM/DD/YYYY` and `YYYY/MM/DD` but `YYYY-MM-DD` is safest.

Everything else works out of the box.

Marketplace

Marketplace

Payment UI Components & Animations

Payment UI Components & Animations