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
  3. Choose a font (Arial, Veranda, Tahoma, Georgia, Times)
  4. Choose a theme (White, Black, Brown, Blue, Green, Red, Custom)
  5. If you picked the Custom theme: Choose a Background (Light, Dark) and choose a custom Bar Color (use color-picker or enter HEX value)
  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.
  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.