Home  /  Articles  /  Framer

Framer

Online Booking on a Framer Site: How to Add It

PUBLISHED 2026-10-29

There are three ways to add online booking to a Framer website: link a "Book" button to your booking tool's page, embed the booking tool on your own page, or use a Framer form that sends booking requests to your inbox. Linking is the simplest and most reliable. Embedding keeps visitors on your site. A request form suits businesses that confirm every booking by hand, such as tutors or private dining.

Framer does not include a booking calendar of its own. It works with booking tools you already use. Framer offers a Cal.com component, and most other scheduling and reservation tools provide embed code that can go into Framer's Embed component.

Which booking method suits your business?

MethodHow it worksBest forWatch out for
Link outButton opens the booking tool's pageClinics, salons, studios, sports clubs using a dedicated systemThe jump to another site; match colours and name where the tool allows
EmbedThe tool's calendar sits inside your pageConsultations, classes, sessions with simple slotsPage speed and how the embed looks on a phone
Request formA Framer form emails you the request; you confirmTutors, private dining, tours, bespoke servicesSlower for the customer; reply quickly

Many businesses combine methods. A sauna studio might link to its booking system for sessions and use a form for group bookings.

How do you link a button to a booking page?

  1. Copy your public booking page address from your booking tool.
  2. In Framer, select the button and set its link to that address.
  3. Choose whether it opens in a new tab.
  4. Repeat for every "Book" button on the site, including the phone menu.
  5. Publish and test on a phone.

If your tool supports booking links for specific services, link each service page to its own booking page. A visitor reading about a facial should land on facial bookings, not a list of everything.

How do you embed a booking tool in Framer?

  1. Find the embed or "add to website" option in your booking tool and copy the code or URL.
  2. In Framer, add the Embed component (or the Cal.com component if you use Cal.com) to the page.
  3. Paste the code or URL and set the size.
  4. Check the layout at desktop, tablet and phone widths.
  5. Publish and make a test booking.

Embeds load content from another service, so check how quickly the page loads on mobile data. If the embed is slow or cramped on a phone, link out instead.

When is a booking request form better?

When you need to check details before confirming, for example a tutor matching a student's level, a restaurant arranging a private dinner or a tour operator checking dates. A Framer form can send each request to your email, a Google Sheet or a webhook. Ask only what you need to reply, and say when you will reply. See where Framer form submissions go for setup and testing.

What should a booking page say besides the calendar?

  • Price, length and what is included
  • Deposit, cancellation and late-arrival policy
  • What to bring or how to prepare
  • Location and how to get there
  • Who to contact if no slot suits

Keeping this text on your own page means it is readable by search engines and AI assistants, and visitors see it before they reach the booking step.

How do you handle reminders, payments and no-shows?

Most booking tools send confirmation and reminder messages, take deposits or full payment and let customers reschedule. Those features live in the booking tool, not in Framer, so choose the tool for them. On the website, your job is to explain the policy in plain words before someone books: how much the deposit is, when it is refunded and how late a customer can cancel. Rules on deposits and cancellation fees vary by country, so check what applies to you. Then make sure the policy text on your site matches what the booking tool actually does.

Which templates are set up for booking?

Several getsites templates have a booking page or booking form you can point at your tool:

  • Dermis (free), for skin and aesthetics clinics, includes a booking page alongside treatments with sessions, weeks to result and price from.
  • Rounds (free), for bathhouses and saunas, has a booking page and session prices off peak and peak.
  • Fixture (free), for sports clubs, has a weekly board of sessions and a join form; live availability stays in your booking system.
  • Clara Tutor ($49) has a booking form parents can fill in from their phone.

For more, see our guides to sports club websites and sauna studio websites, and the launch checklist before you publish.

Frequently asked questions

Does Framer have built-in booking?

Framer does not include its own booking calendar. You can link to or embed a booking tool, use the Cal.com component, or use a Framer form to collect booking requests.

Can I use Calendly with Framer?

Most scheduling tools, including Calendly, provide embed code or a booking link. You can paste embed code into Framer's Embed component or link a button to your booking page.

Is it better to embed a booking widget or link to it?

Linking is simpler and usually loads faster. Embedding keeps visitors on your page. Test both on a phone and choose the one that is quicker and clearer for your customers.

Can customers pay a deposit through a Framer site?

Deposits are usually handled by your booking or payment tool, which you link to or embed. The Framer site shows the policy and sends customers to that tool.

How do I make sure booking requests reach me?

Send a test booking or form submission after every change, check it arrives in the right inbox, and check your spam folder. Repeat after publishing.