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

  1. In your Supaframe dashboard, click New Component.

  2. Choose Booking as the component type.

  3. Give your component a name (for your reference only).

  4. 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.

  1. In your Supaframe dashboard, click the Copy Framer Component Link button.

  1. Open your Framer project.

  2. Paste the link into your project — the booking component will be added instantly.

  3. Use Framer’s Properties Panel to customize styles, fonts, colors, spacing, and layout.

  4. Publish your site and start receiving bookings right away.