Setting Up Online Booking on Your Squarespace Site
TL;DR:
- Integrate Acuity Scheduling for direct bookings on your Squarespace site
- Embed scheduling blocks to display specific appointment types or classes
- Link to external booking pages using button blocks, navigation links, or text links
- Use custom code to embed third-party booking widgets
- Code-based customizations require specific Squarespace plans
Built-in Acuity Scheduling Integration
Acuity Scheduling connects directly with Squarespace, letting clients book appointments and classes through your site. Set up an Acuity account first, then add your scheduling page using a scheduling block.
Adding a Scheduling Block
The scheduling block displays your Acuity appointment types:
- Shows all available appointment types by default
- Filter display settings to show only specific types or classes
- Embed your Acuity URL directly if you're using it independently
Linking to External Booking Platforms
If you're using different booking software, here are three ways to connect it:
Button Block
Add a 'Book Now' button that directs clients to your booking page. This works well on landing pages or service pages where you want a clear call-to-action.
Navigation Link
Include a direct link in your site's main menu. This keeps booking accessible from every page without cluttering your content.
Text Link
Place clickable booking links within any content area. This works well when mentioning specific services or classes in your copy.
Embedding Third-Party Booking Widgets
To integrate other booking services using custom code:
- Get the embed code from your booking service provider
- Open the page where you want the booking feature in your Squarespace editor
- Add a code block where you need it
- Paste the embed code
Custom code (JavaScript or iframes) requires these Squarespace plans: Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced.
FAQs
Can I use booking services other than Acuity with Squarespace?
Yes, you can use any service that offers embeddable booking options by linking directly or using custom code within a code block.
How do I customize my booking block in Squarespace?
Acuity Scheduling lets you customize blocks to display only certain types of bookings or classes, depending on what you need.
Which Squarespace plans allow custom code for booking widgets?
You need Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced plans to embed custom code.
Will my booking system work on mobile devices?
Most booking systems are mobile-responsive, but always test your setup on different devices to make sure everything works smoothly.
Jargon Buster
Acuity Scheduling: A booking service that integrates with Squarespace to handle appointments directly on your website.
Scheduling Block: A Squarespace content block that displays bookable services from Acuity.
Embed Code: A snippet of code from external services that lets you add features like booking forms to your website.
Code Block: A Squarespace content block where you can add custom HTML, CSS, or JavaScript code.
Wrap-up
Setting up online booking on your Squarespace site is straightforward with Acuity Scheduling or other third-party services. Choose between embedding a direct scheduling block, linking to external booking platforms, or using custom code for specialized services. The key is integrating these features naturally into your site's design and navigation so clients can book easily without confusion.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for expert training and support.