Outcome
Fewer dropped handoffs: a booked call is automatically tied to the originating lead and reflected in CRM status without manual matching.
Medium Websites system
Booking Handoff Page
A post-intake booking step that embeds Cal.com inside the site's CSP, carries the lead's submission ID into the booking, and reconciles the confirmed slot back onto the lead record via a signature-verified webhook so the CRM stage updates itself.
HMX Zone
Next.js Route Handlers
Verified HMX-owned system
System facts
Booking Handoff Page uses a web app route, data, and conversion layer for Full-Stack Websites. A post-intake booking step that embeds Cal.com inside the site's CSP, carries the lead's submission ID into the booking, and reconciles the confirm... The architecture connects embed the cal, cal, next, and lead capture with an explicit control path.
Main risk
Spoofed or duplicate webhook calls update the wrong record or double-book a stage change.
Prevention
Verify the webhook signature, match on the carried submission ID, and make the update idempotent on event ID.
Fallback
Unmatched or unverified events land in a webhook-failure queue for manual reconciliation instead of mutating data.
System architecture
Booking Handoff Page Architecture
6 nodes
Embed the Cal
Allow only the required Cal
Cal
Next
Fallback Path
Lead Capture
- 01Embed the Cal
A post-intake booking step that embeds Cal.com inside the site's CSP, carries the lead's submission ID into the booking, and reconciles the confirm...
- 02Allow only the required Cal
Allow only the required Cal.com origins in the frame-src/connect-src CSP directives
- 03Cal
Cal.com embed + webhooks supports the route, form, or data boundary for Booking Handoff Page so public UX and backend state stay connected.
- 04Next
Receive booking.created/updated events on a webhook route that verifies the Cal.com signature
- 05Fallback Path
Unmatched or unverified events land in a webhook-failure queue for manual reconciliation instead of mutating data.
- 06Lead Capture
Fewer dropped handoffs: a booked call is automatically tied to the originating lead and reflected in CRM status without manual matching.
4-8 days
How it is built
A post-intake booking step that embeds Cal.com inside the site's CSP, carries the lead's submission ID into the booking, and reconciles the confirmed slot back onto the lead record via a signature-verified webhook so the CRM stage updates itself.
- 01Embed the Cal.com scheduler on /book and pass the client submission ID as booking metadata
- 02Allow only the required Cal.com origins in the frame-src/connect-src CSP directives
- 03Receive booking.created/updated events on a webhook route that verifies the Cal.com signature
- 04Match the event to the lead by submission ID and update booking + stage fields on the Supabase row
Tools
Workflow surface
- Cal.com embed + webhooks
- Next.js Route Handlers
- Supabase
- CSP (next.config)
- Experience layer: Embed the Cal.com scheduler on /book and pass the client submission ID as booking metadata
- Server layer: Allow only the required Cal.com origins in the frame-src/connect-src CSP directives
- Database layer: Cal.com embed + webhooks supports the route, form, or data boundary for Booking Handoff Page so public UX and backend state stay connected.
- Automation layer: Next.js Route Handlers handles routine steps while verify the webhook signature, match on the carried submission ID, and make the update idempotent on event ID.
- Measurement layer: Fewer dropped handoffs: a booked call is automatically tied to the originating lead and reflected in CRM status without manual matching.
Data flow
- 01Embed the Cal.com scheduler on /book and pass the client submission ID as booking metadata
- 02Allow only the required Cal.com origins in the frame-src/connect-src CSP directives
- 03Receive booking.created/updated events on a webhook route that verifies the Cal.com signature
- 04Match the event to the lead by submission ID and update booking + stage fields on the Supabase row
Controls and fallbacks
- Spoofed or duplicate webhook calls update the wrong record or double-book a stage change.
- Verify the webhook signature, match on the carried submission ID, and make the update idempotent on event ID.
- Unmatched or unverified events land in a webhook-failure queue for manual reconciliation instead of mutating data.
System path inside the website build
Full-stack websites for service businesses and operators: route architecture, service pages, lead capture, metadata, proof boundaries, blog/database paths, analytics, and deployment checks.
Route map
Service architecture
Clear service routes
01active
Progress72%
Lead capture
Form and context flow
Lead capture that saves context
02active
Progress86%
Public metadata
SEO and schema layer
SEO and schema on public pages
03active
Progress64%
Launch QA
Analytics and deployment checks
Analytics events tied to CTAs
04active
Progress91%