It is very easy to embed your Bookeo booking widget on your Squarespace website.
In this article:
- Step 1 - Set up the integration in Bookeo
- Step 2 - Set up the integration in Squarespace
- Step 3 - Set up the URL of your booking page in Bookeo
- Disable Ajax loading
Step 1 - Set up the integration in Bookeo
1. in your Bookeo account, click on Settings>Theme and Layout>Website integration
2. From the Page location [1] scroll down menu, select the option embed a widget in my web site
3. Copy the widget code shown in the Widget section at point #1 [2]
4. In the Options section from the Second screen [4] dropdown menu, select:
- remain inside the widget, or
- open a separate full-screen page
Click here to learn more about these options.
5. In the Options section from the Mobile [5] dropdown menu, select:
- use the widget embedded in the web site
- enlarge the widget to full screen
Click here for more information on the options offered by Bookeo for the mobile widget.
6. leave the browser window open and open a new tab in your browser
Step 2 - Set up the integration in Squarespace
1. Login to your Squarespace site and select the page you would like your Bookeo code to appear on.
2. Add a Code Block to the page.
3. Paste the widget code (which you copied at Step 1 - # 3) into the block
4. Save. You will not see anything, but don't worry!
5. Click on the View Page button to preview your booking page
Step 3 - Set up the URL of your booking page in Bookeo
1. In your Bookeo account, click on Settings>Theme and Layout>Website integration and input the URL of your booking page at point 2 [3].
2. Save
Disable Ajax loading
Ajax is a method for site loading that retrieves server data for specific elements without reloading the whole page. If your Squarespace template uses Ajax loading, your site only loads the content that’s visible, rather than all the content on the page at once and this conflicts with embedded custom code, including the Bookeo widget. Therefore you should make sure that Ajax loading is disabled in your site. To disable Ajax in your Squarespace site:
1. Log into your Squarespace dashboard
2. In the Home Menu, click Design [1]
3. Click Site Styles [2]
3. Scroll down to Site: Loading and uncheck Enable Ajax Loading [3]. Click on Save [4] at the top