Booking opens over the page
With the overlay setting, your booking page appears on top of your site, and closing it puts the visitor back where they were reading.
Booking widget
Picktime Booking is a Framer booking plugin, published by us in the Framer Marketplace, so the whole set-up happens on your canvas and you never touch a line of code. Add a Book Now button, a floating tab or the booking page itself, style it in the editor, and visitors book appointments, classes and services without leaving your site. It opens your Picktime booking page, which is on every plan, including the free one.
Your websiteBuilt in Framer
HomeWorkBook Now
Harbour YogaClasses and private sessions
Added from the plugin
Booking pageHarbour Yoga
Category
Booking widget
A Framer plugin
Direction
Not a sync
Your Framer site shows a button or embed that opens your Picktime booking page
Shows up in
Your own site
Wherever you drop it on the canvas
Set-up
Three steps
No code
What changes
What a plugin can do that a pasted link cannot
Jump to set-upWith the overlay setting, your booking page appears on top of your site, and closing it puts the visitor back where they were reading.
A floating button or an edge tab stays on screen as people scroll, which suits a long one-page Framer site.
Picktime colours or your own, filled or outline, square, rounded or pill, in three sizes. The preview changes as you pick.
A booking from your Framer site lands in the same calendar as the ones from Instagram and Google Maps.
Set up
The other website connections start in your Picktime dashboard and end with a pasted snippet. This one starts and finishes in the Framer editor.
The plugin is listed in the Framer Marketplace under Picktime Booking. Either identifier works. The booking page link is usually the quicker of the two, because it is the address you already give clients, so copy it from there rather than retyping it. If you do not have a Picktime account yet, make the free one first; the plugin has nothing to point at without it.
The button text comes in 110 languages, or you can type your own. The click behaviour is the choice that matters most: an overlay on the same page, a new tab, the same tab, or the booking page embedded straight into your layout. The preview redraws with each change, so you can see the button against your own design before anything goes on the canvas.
Once it is on the canvas you can change every option in the properties panel, so a wrong colour or a wrong click setting is a quick fix rather than a reason to start again. Publish your Framer site, then open it in a private window and book something to check it reaches your calendar. Try it on an iPhone as well; the next section explains why it behaves differently there.
The plugin opens your Picktime booking page, and that is on every plan, the free one included. picktime.com/pricing has no Framer row. The Booking Widget row, which is the job this plugin does, carries a tick against all three plans.
What you pay Framer to publish your site, and what that plan includes, is between you and Framer.
Check this first
Safari blocks booking inside an overlay, so the plugin sends those visitors to a new tab instead.
You will see this the first time you test on an iPhone or iPad, and it is the plugin working as designed rather than a fault. Whatever click setting you chose, a visitor on Safari gets your booking page in a new tab. Your Framer page stays open behind it, so finishing the booking and closing the tab puts them back on your site.
For the overlay setting, that means two experiences: the overlay on Chrome, Edge and Firefox, and a tab on Safari. Test both before you decide the overlay is right for you. If your clients book from their phones, every one of them holding an iPhone gets the tab.
The inline embed sidesteps the question, because nothing has to open. If you want a dedicated booking page on your Framer site, with the slots visible as soon as the page loads, the embed is the setting that gives every visitor the same thing.
Placement
Framer sites tend to be either one long scrolling page or a handful of designed pages. The right setting follows from which you have.
On a one-page site, use the floating button or the edge tab. A visitor who decides halfway down your class timetable should not have to scroll back to the header to act on it, and a control that stays in view removes that trip. Put a second, ordinary Book Now button at the end of the page as well, for the people who read everything first.
On a site with a page per service, put a button at the end of each service description, set to open in an overlay. Every button points at the same booking page and the same calendar, so adding a fifth costs exactly as much as adding the first.
If you have a page whose only job is booking, embed the booking page itself. A button on a page called Book is one click more than the visitor expected.
The plugin also offers an attention animation: pulse, wiggle, bounce or glow. Each one respects a visitor’s reduced-motion setting. Use one, on one button. A floating tab that bounces on every page of a calm, well-designed site works against the design you spent the time on.
Something here not answered? Search the help centre or write to support@picktime.com
Book from the page they are already on
Make the free account, open the plugin in Framer, and drop the button beside the thing people come to book.