Booking Widget
Calendar SyncFull-featured appointment booking with Google Calendar integration, real-time availability, deposit collection, and automatic confirmations.
Google Calendar
Real-time sync with your Google Calendar
Time Zones
Automatic time zone detection and handling
Deposits
Collect deposits at time of booking
Confirmations
Automatic email confirmations and reminders
Embed Code
<!-- Booking Widget -->
<div id="qt-portal-booking"
data-widget="booking"
data-tenant="YOUR_TENANT_ID"
data-container="qt-portal-booking"
data-display-mode="button">
</div>
<!-- Load widgets -->
<script type="module"
src="https://cdn.widgetfied.com/portal.js">
</script>Replace YOUR_TENANT_ID with your actual tenant ID. Use data-display-mode="button" for best results.
How It Works
Customer Selects Service
Customers choose from your available services, each with its own duration and pricing.
Views Available Times
The widget shows available time slots based on your Google Calendar availability and business hours.
Books Appointment
Customer enters their details and optionally pays a deposit to confirm the booking.
Confirmation Sent
Both you and the customer receive confirmation emails, and the appointment syncs to Google Calendar.
Google Calendar Setup
The booking widget requires Google Calendar integration to work properly:
- 1Go to Settings → Integrations in your dashboard
- 2Click "Connect Google Calendar"
- 3Sign in with your Google account
- 4Grant permission to access your calendar
- 5Select which calendar to use for bookings
Configuration
Configure your booking widget in the dashboard:
Google Calendar
RequiredDashboard → Settings → IntegrationsConnect your Google Calendar to sync availability and appointments
Business Hours
RequiredDashboard → Settings → BookingSet your available hours for each day of the week
Services
RequiredDashboard → Settings → ServicesDefine bookable services with duration and pricing
Deposit Settings
Dashboard → Settings → PaymentsConfigure deposit amounts and payment processing
Buffer Time
Dashboard → Settings → BookingSet time between appointments for preparation
Requirements
- Active Widgetfied subscription
- Google Calendar integration configured
- At least one bookable service defined
- Business hours configured
- Stripe Connect (optional, for deposits)
Best Practices
Set Realistic Buffer Times
Allow time between appointments for travel, prep, or unexpected delays
Collect Deposits
Reduce no-shows by requiring deposits for bookings
Send Reminders
Enable automatic reminder emails 24 hours before appointments
Block Personal Time
Mark personal events on your calendar to prevent bookings during those times
Troubleshooting
No available time slots showing
- • Verify Google Calendar is connected and authorized
- • Check that business hours are configured
- • Ensure you have at least one bookable service
- • Look for conflicts on your Google Calendar
Appointments not syncing to calendar
- • Re-authorize Google Calendar connection
- • Check that the correct calendar is selected
- • Verify the calendar has write permissions
Time zones incorrect
- • Check your dashboard time zone setting
- • Verify customer is seeing times in their local zone
- • Clear browser cache and reload
Deposits not processing
- • Verify Stripe Connect is configured
- • Check that deposit amounts are set for services
- • Ensure Stripe account is in good standing