Installation, Booking Options & Website Best Practices
If your goal is to get bookings on your Squarespace site while keeping your content searchable on Google — this guide walks you through the recommended setup.
Below, you’ll find:
How to add Book Now buttons (link vs pop-up)
Which Buddy embed options to use and when
How to structure your Squarespace pages for SEO + conversion
Scroll down for step-by-step installation and layout examples.
Before adding the widget: Recommended Squarespace Page Setup
Before adding any Buddy booking widgets, we recommend that each activity (or group of activities) includes a small amount of native content written directly on the page.
This ensures your activities can be discovered through search engines — while Buddy handles the booking flow.
Why?
Search engines do not reliably index content inside iframes
Native text helps your tours, courses, and trips appear in search results
Booking widgets should support booking, not replace your page content
Minimum Content We Recommend
This content does not need to be long or detailed.
At a minimum, each page or section should include:
1 image or image slideshow
Activity title
Short description (1–2 paragraphs)
Key info (location, duration, ages or experience level)
Book Now button (link or pop-up)
This content helps people find you.
The widget helps them book.
The sections below show exactly how to add buttons, choose embed options, and structure your pages depending on how many activities you offer.
The Two Most Common Booking Button Questions
Most Squarespace users ask one of these:
“I just want a Book Now button.”
“I want the booking to open without leaving my page.”
Buddy supports both.
Option 1: Book Now Button → Opens a New Page (Link Option)
Use this if you’re okay with bookings opening in a new tab or page.
How to set this up in Squarespace
Step 1: Add a button
Edit your Squarespace page
Within the correct section — Click the ➕ Add Block button
Choose Button
Place it under your activity content
Click the pencil icon
Set the button text (e.g. Book Now)
Step 2: Add the Buddy booking link
In Buddy Booking:
Go to Settings → Embeddable Widgets
Select Link: URL
Copy the generated link
Back in Squarespace:
Paste the link into the button URL field
Save
✅ Clicking the button opens the booking page in a new tab.
Option 2: Book Now Button → Opens a Pop-Up Module (Recommended)
Best UX + best SEO balance
This is the setup we recommend most often.
Why?
Keeps users on your website
Preserves SEO-friendly page content
Feels cleaner and more modern
Works well for single activities and galleries
How to set up a Booking Pop-Up in Squarespace
Step 1: Add your Book Now button (Just as shown in example above)
Add a Button block
Set the text to Book Now
Add a embed link link to the button
Step 2: Generate the Pop-Up code snippet in Book with Buddy
Go to Settings → Embeddable Widgets
Select HTML: Pop-Up Module
Copy only the first line of code. This is the snippet that ensures that the widget opens as a pop-up and not in a new browser tab.
(the<script>line at the top)
⚠️ Important:
Do not copy the full block — only the first line.
Step 3: Add snippet to your website
You can add this snippet in the footer or header of your website if you want all buttons with your Book with Buddy links to open as pop-ups.
If you want to limit this behaviour only to the particular page your Book Now button is on, then add an Embed Block in the same section behind the button (see Step 4 below).
Either way, the way to do it is the same:
Click ➕ Add Block
Choose Embed
Paste the script line only
Save
The embed block will look empty — this is expected.
Step 4: Place the Embed behind the Button
Select the embed block
Use Squarespace’s Arrange / Layer controls
Move the embed behind the button
(icon looks like overlapping squares)Save
What happens now
Visitor clicks Book Now
Booking pop-up opens instantly
User stays on the page
Your page content remains crawlable by search engines
How to Organize & Build Your Squarespace Pages
Once your booking buttons are installed, how you structure your Squarespace pages plays a big role in search visibility, user experience, and conversion.
Below are the two most common (and recommended) ways businesses organize their websites when embedding Buddy Booking.
Option 1: One Page With All Activities Listed (Most Common)
Best for:
Dive shops with multiple tours, courses, or trips
Businesses that want a simple navigation structure
Pages like Scuba Tours, Courses, or Trips
This approach uses one main page per category, with each activity displayed as its own section on that page.
Recommended Page Structure:
1. Header Section (Top of Page)
At the top of the page, we recommend:
A subtitle (e.g. Scuba Tech Destin)
A large page title (e.g. Scuba Tours)
A “View All Tours” or “Book Now” button
That button should open the Activity Gallery pop-up, filtered to the relevant category (Tours, Courses, or Trips).
This allows visitors to:
Instantly see everything available
Start booking right away if they’re ready
2. Below the Header: One Section per Activity
Below the header, create a dedicated section for each activity.
Each activity section should include:
Image or image slideshow
Activity title
Short description
Book Now button (single-activity pop-up)
A simple 3-column info layout, for example:
Location
Duration
Experience level / Ages
Optional sections like:
What to Expect
Perfect For
Each Book Now button should open the booking flow for that specific activity.
Why This Works Well
All activity information is native text and crawlable by search engines
Visitors can scroll and compare activities easily
The Activity Gallery gives a quick “see everything” option
Single-activity buttons take users straight into booking
You get strong SEO and a clean booking experience
This is the most common setup for Tours pages.
Option 2: Separate Page for Each Activity
Best for:
Courses
Trips
Activities with lots of information, FAQs, or requirements
In this setup, each activity has its own dedicated page instead of being a section on a larger page.
Recommended Page Structure:
1. Header Section
At the top of the page:
Activity title
Short subtitle (optional)
Book Now button (single-activity pop-up)
Optional hero image, slideshow, or video
This immediately tells visitors what the activity is and how to book it.
2. Information Section
Below the header:
Full activity description
Images or slideshow
Key information laid out clearly (location, duration, requirements)
A second Book Now button (single-activity pop-up)
This is helpful for activities where people want to read more before booking.
3. Visual Booking Section (Optional but Recommended Here)
Because this is a single, dedicated activity page, this is where we recommend embedding the visual iframe directly on the page.
Recommended order:
Header with Book Now button
Information section with Book Now button
Visual iframe embed (calendar + availability)
FAQs section
Additional sections (waivers, policies, what to bring, etc.)
This gives you:
Strong SEO from native content
Clear booking CTAs
A visible calendar for users who want to see dates immediately
FAQ:
What’s the Best Overall Setup?
Our general recommendation:
Use native text and images on your Squarespace pages
Use Book Now buttons that open pop-ups for booking
Use Activity Galleries for browsing
Use Single Activity buttons for direct booking
This setup gives you the best balance of:
Search visibility
Clean design
Easy booking
Flexibility as your offerings grow
When is it best to use the Activity Gallery vs Single Activity?
Activity Gallery
Best used when:
You want visitors to browse everything at once
You’re linking from a header or homepage CTA
You want to show:
All activities
All tours
All courses
All trips
Common uses:
Header buttons (“View All Tours”)
Homepage CTAs
Overview pages with many offerings
Single Activity
Best used when:
You’re highlighting one specific tour, course, or trip
Each section or page represents a single bookable experience
You want the booking flow to open directly for that activity
Common uses:
Individual activity sections
Dedicated activity pages
Course and trip pages