Squarespace Booking Calendar

Easily embed an online booking calendar into your Squarespace site. This lets your clients and customers book appointments and pay the up-front payment directly within your website. 

  1. First up, log in to your Bookedin account 
  2. Go to Settings > Integrate in the top menu, on the Integrate screen you'll see some options under Website Booking Calendar
    Website Booking Calendar1.png
  3. First, choose a font: Proxima Nova, Arial, Verdana, Tahoma, Georgia, Times
  4. Now choose a theme: Match Device, Light, Dark
  5. If you picked the Custom theme, choose a custom Bar Color using the color-picker or by entering a HEX value, then click "Choose".
    Website Booking Calendar2.png
  6. When you're happy with your settings, hit Get Code. Then you'll see 2 separate boxes with code. Follow the instructions below to paste each piece of code into your website.
    Website Booking Calendar3.pngWebsite Booking Calendar4.png
  7. In a new browser window, log in to your Squarespace editor
  8. For the 1st block of code, follow squarespace's instructions for header code injection here.
  9. For the 2nd block of code: Choose the Pages section in the side bar of the editor
     
  10. Under Main Navigation, choose an existing page where you would like to embed your calendar, or hit the "+" icon to create a new page.
  11. If you chose to create a new page, give it the name Book Now
  12. On your new page, click anywhere to edit the page, then add a new content area, and choose the Code block option. See Squarespace's code block article if you need some help on how to do this.

  13. In the code block you just created, paste in the 2nd block of code from Bookedin, then hit save.
  14. That's it! You can now view your new booking calendar in your published webpage. Be sure to view your live site to ensure the booking calendar is working properly. 

Comments