Appearance
G.6: Embed Booking
Summary
Guests book through an embedded booking widget hosted at /embed/book/:slug. The booking behavior mirrors the public booking page but is designed for iframe or script embeds on external sites.
Role
- Primary: Guest
- Secondary: Counselor
Entry Point
- URL:
/embed/book/:slug - Embed code generated from booking widget settings.
Preconditions
- Counselor has a booking widget with a slug.
- External site embeds the generated iframe or script.
Steps
- External page loads the embed URL.
- Embedded booking page loads counselor booking configuration.
- Guest selects service and slot.
- Guest enters details.
- Backend creates a booking and triggers the booking notification lifecycle.
- Embedded UI shows the outcome inside the external page.
Diagram
Edge Cases
- Embed height: External page controls iframe sizing.
- Unavailable widget: Embed shows the same unavailable states as the public booking flow.
- Duplicate slot: Backend remains the source of truth for conflicts.
Current Implementation Notes
- Frontend:
frontend/src/features/booking/components/embed-booking-page.tsx - Widget settings:
frontend/src/features/booking/components/widget-config-editor.tsx
Screenshot Status
- Not captured.