How can I add a booking widget to my Squarespace website? (2024)

Within this article you will learn how to implement the online reservation system onto your Squarespace website. If you have a dedicated team that manages your website, we recommend that you share this article with them.

If you have not yet, start by copying the HTML code for your desired widget. If you are unsure how to get the code you can refer to the previous article How do I find the widget code to add to my website?.

Once you have copied the code for the widget go to the Squarespace editor and follow these steps:

1. Click the + icon, located on the left side navigation.
2. Click on the Embed option from the list.
3. Select the Embed a Widget option.
4. Position the iframe on the page where you want the Book Now button to be located.
5. Click Enter Code, which you can see once you click on the iframe that you have previously positioned on your page.
6. Paste the code for the Book Now button using CTRL+V or right-clicking within the box area dedicated for the code.

Note: You need to have the Business plan in order to have the active button, if you do not have it, follow the instructions below to activate your widget.

1. Copy the script portion of the code you added on the previous step, and remove it from the Code section.
2. Save the changes for your page by hovering over Done and clicking Save.
3. Navigate back to Home.
4. Click on Settings.
5. Scroll down and click on Advanced.
6. Click on Code Injection.
7. Paste the previously copied code to the Footer section.
8. Save.

Note: Due to the way that Squarespace works, the online reservation system will open in a new tab, as supposed to opening in the same tab that the button is located on.