Booking calendars
Add a Book section to your site with a Cal.com, Calendly or Square link. Visitors get a booking button, and on your home page a Cal.com or Calendly calendar below it.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
The Book section is the one third-party calendar UOVA can show on a published site. You paste the booking link of a provider you already use, and UOVA adds a heading, a booking button and, where the provider allows it, the calendar itself.
#How the Book section works
The section sits at the end of the page, after your own sections, in your site's palette when it has one. UOVA adds it, so it is not an element in the editor and you cannot drag it. With no link saved there is no Book section, and UOVA never guesses a link. A floating button with your button text jumps to it once a visitor has scrolled past three quarters of a screen.
When you generate a site, UOVA adds a Book section on its own only if it finds a Cal.com, Calendly or Square link in the content it read or in your prompt.
#Providers and links
| Provider | Paste a link like | What visitors see |
|---|---|---|
| Cal.com | cal.com/oak-street-salon/haircut | The button, and the calendar on the home page |
| Calendly | calendly.com/oak-street-salon/haircut | The button, and the calendar on the home page |
| Square Appointments | square.site/appointments/buyer/widget/<id>/<key> | The calendar for a buyer widget address, the button alone for any other Square address |
These are the examples the product shows beside the link field. UOVA checks a pasted link against a fixed list of hosts and refuses any other: cal.com, www.cal.com and app.cal.com; calendly.com and www.calendly.com; square.site, squareup.com, book.squareup.com, app.squareup.com and any address ending in .square.site.
- https:// is optional, and http:// is changed to https://. Cal.com and Calendly also accept only the tail, such as
oak-street-salon/haircut. For Square paste the full address. - Anything after a ? is dropped, and a Cal.com address ending in /embed loses that ending. An address with a user name or password is refused.
- You can paste the embed snippet your provider gives you. UOVA uses the first https address in it, so check the Books at line before you save.
- A seller address such as
https://yourshop.square.site/needs no path. The bare square.site and squareup.com addresses are refused.
#Add a booking link in the editor
Step 1: Open the Booking tab
Open the settings cog, choose All project settings, then Booking.
Step 2: Choose a provider
Under Provider pick Cal.com, Calendly or Square Appointments. The link field is labelled Your Cal.com link, or the provider you picked.
Step 3: Paste the link
When UOVA accepts it, a line reads Books at with the address it will use. Otherwise the line becomes an error:
That is not a Cal.com booking link. Paste the link people book on — we only accept cal.com, www.cal.com, app.cal.com.Step 4: Set the wording
Edit Section heading, the optional One line under it and Button label. Untick Show the calendar on the page for the button alone.
Step 5: Press Add Book section
A Preview appears first, and nothing reaches your site until you press the button. Saved confirms it, and the button then reads Update Book section. Remove takes the section out.
Step 6: Publish
Visitors see the section only after you publish. See Publish your site.
If your site already links to one of the providers, the pane first offers Your site already links to that provider, with Use this link and Not this one.
| Editor field | Dashboard field | Default | Limit |
|---|---|---|---|
| Provider | Booking tool | Cal.com | Cal.com, Calendly or Square |
| Your Cal.com link | Booking link | Empty | Must pass the checks above |
| Section heading | Heading | Book an appointment | 80 characters |
| One line under it | Description | Empty, so no line | 200 characters |
| Button label | Button label | Book now | 40 characters |
| Show the calendar on the page | Show the calendar on the page | On | Off gives the button alone |
Longer text is cut at the limit, and a blank heading or button label falls back to the default. A site has one Book section.
#Set it from the dashboard
Open your site in the dashboard and choose Scheduling. It works on a draft site too. With no link it offers Add a booking link. The dialog has the fields in the table above. Its link errors read Paste your Cal.com booking link., That's a Calendly link. Choose Calendly above, or paste a Cal.com link. or That isn't a Cal.com booking link. It looks like cal.com/oak-street-salon/haircut.
Saving writes to the same site document as the editor and does not publish. The Booking page card shows Embedded calendar or Button only, and whether it is live.
#What visitors see
- The button comes first. It is a real link to the provider's booking page, opens in a new tab and works when the calendar does not. On a phone it is full width.
- On your home page, including on a custom domain, the calendar sits below the button. Every other page shows the button alone.
- The calendar loads as a visitor scrolls near it. It starts 720 pixels tall, or 620 under 768 pixels wide, then follows the provider's reported height, between 360 and 4,000 pixels.
- If the provider refuses to be framed or the calendar has not painted after 8 seconds, UOVA removes it and shows "The calendar opens on Cal.com." under the button.
- The editor canvas and the pane's Preview leave out the calendar. Open the live site to see it.
#Booking requests and the Inbox
A booking made on Cal.com, Calendly or Square stays with that provider, and UOVA is not told. The Scheduling page says: "Bookings made directly on Cal.com stay in Cal.com. UOVA lists the requests sent through your site's forms."
On a live site the Requests table lists non-spam messages from booking forms, with Name, Requested time, Contact and Received. A form counts when its name is a booking one, such as Booking, Reservation or Visit request, or contains book, appointment, reserve or schedule. It reads the latest 500 form messages.
Open a row for Open in Inbox and Reply by email. Every form message is also in the Inbox, where a sender who gave a phone number and no email gets Call back instead. Set recipients for booking forms under Forms in All project settings. See Inbox and form messages and Forms and contact blocks.
#Plans and limits
- Neither the Booking tab nor the Scheduling page checks your plan.
- Only Cal.com, Calendly and Square Appointments links are accepted, with no other embed code.
- The Book section takes no payment and has no calendar of its own, and UOVA does not sync with your calendar. Availability and confirmations come from the provider.
- Your own HTML cannot hold an iframe. See Custom CSS, HTML blocks and head code.
#Common questions
Not as a calendar. Add a button and set its Link field to that tool's page. See Buttons and links.
No. UOVA adds it at the end of the page, outside the editor's elements. See Sections for sections you can move.
No. Bookings are made on your provider, so check your provider account. UOVA lists only requests sent through your site's own forms.
