--- title: "Booking Flow Overview" description: "This guide explains the complete experience prospects have when booking through your SalesCal booking page." url: https://help.salescal.ai/en/articles/5-booking-flow-overview collection: "Booking Widget" updated: 2026-10-19 language: en --- # Booking Flow Overview This guide explains the complete experience prospects have when booking through your SalesCal booking page. ## The Prospect Journey The booking flow consists of several steps designed to collect information, qualify leads, and let prospects select their preferred time. ## Step 1: Contact Information ### What Prospects See - **Left column**: Form fields for contact info - **Right column**: Calendar preview (disabled with overlay message) - Company logo (if configured) - Event name and description - Step indicator showing progress ### Default Fields - **Name**: Full name or split first/last name - **Email**: Email address with validation - **Phone**: Phone number with country code selector ### Form Behavior - Real-time validation as prospects type - Required fields must be completed to proceed - Phone numbers validated for international format - Auto-scroll to Step 2 when Step 1 is complete ### Lead Capture When Step 1 is complete (before moving forward): - A lead record is created automatically - Captures contact info + geolocation - Syncs to GoHighLevel as "incomplete" (if connected) - You capture the lead even if they don't complete booking ## Step 2: Additional Questions ### What Prospects See - Step 2 fields appear automatically below Step 1 - Visual separator between steps - Custom fields you've configured - Continue button becomes active ### Custom Questions This step typically includes: - Qualification questions - Business information - Project details - Any custom fields you've added ### Qualification Check When prospect clicks "Continue": 1. All form responses are captured 2. Qualification rules are evaluated 3. Lead scoring is calculated (if enabled) 4. Prospect either qualifies or is disqualified ## Disqualification Path If a prospect fails qualification rules: ### What They See - Full-screen message: "Unfortunately, there are no available times that match your requirements" - Calendar remains disabled - No ability to select a time ### What Happens Behind the Scenes - Lead marked as `is_qualified: false` - Disqualification reason stored - Synced to GoHighLevel as "disqualified" - Lead appears in your dashboard with disqualified status ## Step 3: Calendar & Time Selection If the prospect qualifies, they proceed to time selection. ### What Prospects See - **Left sidebar**: Event details (name, duration, logo) - **Center**: Calendar for date selection - **Right**: Available time slots for selected date ### Calendar Layouts **Full Month View** (default): - Traditional monthly calendar grid - Navigate between months with arrows - Available dates highlighted - Click a date to see time slots **Week Strip View**: - Horizontal 7-day strip - Day names displayed - Navigate between weeks - More compact design ### Date Selection Rules Prospects can only select dates that: - Fall within the booking window (min notice to max advance) - Have available time slots - Are not blocked by date overrides - Have at least one available host (for team events) ### Time Slot Selection For the selected date: - Available slots shown in a list - Times displayed in prospect's selected timezone - Hover/click to select a slot - "Confirm" button appears on selection ### Timezone Handling - Defaults to prospect's browser timezone - Timezone selector allows changing preference - All times converted automatically - Common timezones prioritized in selector ## Step 4: Confirmation When prospect confirms their selection: ### Booking Process 1. Meeting record created 2. Host assigned (for team events) 3. Calendar event created 4. Meeting link generated (Google Meet/Zoom) 5. Confirmation synced to CRM ### If Booking Fails Occasionally the chosen slot can no longer be booked — most commonly on [multi-host events](https://docs.salescal.ai/docs/features/events/multi-host-events) when every host's calendar filled up while the prospect was completing the form. The widget shows an inline message next to the time slots: - "That time was just taken. Please pick a different time." — the slot became unavailable; the prospect picks another time and retries - "Something went wrong while booking. Please try again." — a network or server problem; retrying usually succeeds The prospect's form answers are kept either way — they only re-select a time, never re-enter their details. ### What Prospects See - Success message: "Your meeting is scheduled" - Confirmation details: - Meeting name and duration - Date and time with timezone - Meeting location/link - Attendee information (host and prospect) - Add to calendar options (Google, Outlook, Apple) - Optional: Confirmation video embed - Optional: Confetti animation ### Email Notification - Confirmation email sent automatically once the booking is finalized - Shows the meeting details (event, host, date, time, location) and has an `.ics` calendar invite attached, so the invite previews directly inside the prospect's email client - Asks the prospect to confirm by accepting the calendar invite — their response is tracked as the meeting's [RSVP status](https://docs.salescal.ai/docs/features/meetings/managing-meetings) - Message displayed on the page: "A confirmation email has been sent to \[email\]" ## Add to Calendar Options Prospects can add the meeting to their calendar:

Option

Action

Google Calendar

Opens Google Calendar in new tab

Outlook/Microsoft

Opens Outlook calendar in new tab

Apple/iCal

Downloads .ics file

Each includes: - Event title and duration - Meeting link or location - Organizer information - Event description ## External Confirmation Pages Optionally redirect prospects to your own confirmation page: 1. Enable external confirmation in event settings 2. Set the redirect URL 3. Prospect is redirected after booking with parameters: - `meeting_id` - `event_name` - `first_name`, `last_name`, `email` - `scheduled_at`, `duration` - `meeting_link`, `meeting_phone` - `host_name`, `location_type` ## Form Style Variants ### Stepped Form (Default) - Multiple fields visible per screen - Traditional multi-step form layout - Step 1 → Step 2 → Calendar ### Slide Form - One field per screen - Full-screen immersive experience - Card-based transitions - Modern, focused design Configure in event settings under **Form Style**. ## Mobile Experience The booking widget is fully responsive: - Single-column layout on mobile - Touch-friendly calendar - Optimized time slot selection - Same complete functionality ## Best Practices ### Optimize Step 1 - Keep it minimal (name, email, phone) - Ensures you capture leads even if abandoned - Move qualifying questions to Step 2 ### Clear Instructions - Use descriptive field labels - Add helpful placeholder text - Explain why you're asking each question ### Test Regularly - Book through your own form in incognito mode - Test on mobile devices - Verify confirmation emails arrive ## Related Guides - [Embedding on Your Website](https://help.salescal.ai/en/articles/6971d1c57a0c739e5aa3af94.md) - Add the widget to your site - [Customization & Branding](https://help.salescal.ai/en/articles/6971d18a7376610244931405.md) - Style your booking page - [Custom Form Fields](https://help.salescal.ai/en/articles/6971f0f407a55ac789b74556.md) - Configure form fields - [Qualification Rules](https://help.salescal.ai/en/articles/6971d4beadf15e864420da21.md) - Set up auto-qualification