Before following this guide, please make sure:
- You have an account with us (Event Calendar App), and have built an Event Calendar you would like to add to your website.
- You have an active plan (even if just in trial phase). You cannot add the Event Calendar to your website until you have started a plan. You can do this at your account page.
All good? Let's go!
There are two parts to adding your new Event Calendar to Squarespace.
- Getting your embed code from Event Calendar App.
- Using this embed code to add your Event Calendar to Squarespace.
Both steps are super simple.
1) Get your Embed Code
Go to your Event Calendar App dashboard, and select the calendar which you want to add. In my case, I want to add 'Calendar 1'.
This will take you to the editor page.
On the right of the screen towards the top you will see a button that says 'Add to your website'.
Click this, and it will open a modal.
This is your embed code. We'll need this later. For now, click 'Copy Code'. This copies the code to your clipboard, being you can 'paste' it somewhere later.
2) Add the Event Calendar to Squarespace
Go to your Squarespace builder, it should look something like this.
The next steps are now very similar to adding a normal 'block'.
You now need to choose where you would like your Event Calendar to be on your Squarespace site.
I wanted mine on the Events pages. Browse to where you would like the calendar to be and click 'Edit'.
Once you've clicked edit, you now need to add a new block. Click the + symbol to do this.
Select the Embed Block. Do not select Calendar, that is just Squarespace's default calendar block.
Click the code icon,
Then paste your embed code into the modal that now opens up. It should look something like this:
And click 'SET'.
Then click APPLY on the previous modal.
You should now see Squarespace's embedded script message.
Unfortunately Squarespace will not let you view the Event Calendar while you are in 'edit mode'. However, we can still easily see what the Event Calendar will look like. but first....
IMPORTANT: Click save in the top left corner to ensure everything that you have just done is saved.
Squarespace will display this 'script disabled' until your completely refresh the page (cmd + r on mac / Ctrl + f5 on pc). Every time you edit that section, you will need to exit 'Edit Mode' and refresh the page to see the Event Calendar. Unfortunately a bit of a nuance that does provide some confusion.
Importantly, your customers will not have this problem at all, and they will see the calendar perfect every time. This will just affect you in edit view.
Test it all works:
Visit your live website and check everything loads as expected.
Specifically, navigate to a page on your website that does not contain Event Calendar App and refresh the page. Now, navigate to the page of your site that does contain the Event Calendar. Does everything load correctly? If so, you're done! If not read on for some further steps:
Further steps for 'ajax templates':
Some Squarespace templates are 'ajax enabled' and require some extra steps that we've listed here.