Getting Started
Framer Components
Booking Component
The Booking Component lets visitors schedule appointments directly on your Framer site — with only your available time slots showing. You can manage all bookings from your Supaframe dashboard.
How to Create a Booking Component
In your Supaframe dashboard, click New Component.
Choose Booking as the component type.
Give your component a name (for your reference only).
Click Create — your new booking component will open in the setup view.

Setting Services
Your services are what visitors can book with you (e.g., “30-Minute Consultation”).
Title: Short name for the service.
Description: Optional details about what’s included.
Duration: How long the meeting lasts (in minutes) — determines available time slots.
Pricing (optional): If you want to display a price next to the service.
You can create multiple services, each with its own duration and price.

Setting Availability
Control when you’re available to take bookings.
Set your default weekly availability (e.g., Mon–Fri, 9am–5pm).
Adjust availability per day (different hours for different days).
Add breaks or mark specific days as unavailable.

Managing Bookings
From your dashboard’s Bookings tab:
Approve or cancel new booking requests
View all appointments in monthly or weekly calendar view
Filter bookings by status (Pending, Approved, Canceled)
Search by customer name or email


Auto Confirm & Auto Sync Settings
Auto Confirm: Automatically approve bookings without manual review.
Auto Sync: Your booking component will always show only available dates; booked slots are hidden instantly from your Framer site.

Email Options
Stay informed about every new booking without having to check your dashboard.
Email notifications
When enabled, Supaframe will send an email to your profile email address for each new booking.
Toggle this on in your Booking Component settings.

Framer Component
Easily add your booking form to your Framer website.
In your Supaframe dashboard, click the Copy Framer Component Link button.

Open your Framer project.
Paste the link into your project — the booking component will be added instantly.
Use Framer’s Properties Panel to customize styles, fonts, colors, spacing, and layout.
Publish your site and start receiving bookings right away.
