Integration

Integrate bookings with your Squarespace website

Squarespace makes it simple to include external content in their websites, so you can add beautifully customized booking pages to your Squarespace website with ease.

Add a schedule page

Add event pages

What you need to do

Create your Bookable account

Customize your account

Choose your free shareable URL. Select your brand color and upload your logo.

Select how you would like to be paid

You can choose for customers to pay online, pay you later via cash or bank transfer, or you can opt to create free events.

Create your first event

Set up an event, or create a whole schedule of events. Customize your events with photos, descriptions, map locations and more.

Add your Bookable schedule to your Squarespace site

Option 1: Add a button that links to your Bookable Schedule URL (Recommended)

Redirecting customers to your Bookable Schedule URL allows the schedule to be loaded as a full page, and gives access to features such as memberships and event credits.

Just add a button to your Squarespace site and set the URL of the button to your Bookable Schedule URL. Your Bookable Schedule URL can be found under Account Settings in the Bookable Dashboard.

Option 2: Add your Bookable schedule inside a section in your Squarespace site

In the Squarespace editor, select the section where you want to include your Bookable schedule, select
ADD BLOCK
, and then search for the Embed block.
Within the Embed block Content settings, choose the option to embed as a Code Snippet, then select Embed data and copy and paste the following code into the Embed data editor, replacing the value of src with your Bookable URL:
```
<iframe
  src="insert-your-bookable-custom-url-here"
  width="390"
  height="884"
  frameBorder="0"
  style="border: 1px solid; border-color: #d1d5dc"
/>
                  
```
Your Bookable Schedule URL can be found under Account Settings in the Bookable Dashboard.

The width and height of the schedule can be controlled using the width and height attributes, and the border color can be customized by editing the style attribute.