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

1. External page loads the embed URL.
2. Embedded booking page loads counselor booking configuration.
3. Guest selects service and slot.
4. Guest enters details.
5. Backend creates a booking and triggers the booking notification lifecycle.
6. 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

• Session selection:
• Date and slot picker:
• Guest details form:
• Confirmation:

Related Flows

• G.5 Public Booking
• CO.27 Booking Settings