This walkthrough will guide you in embedding your Display.Church (D.C) calendar or groups widget view on your SquareSpace website.
2024.03.22: Sometimes, new embeds do not show up in on builder pages until published. We suggest using a test page or private mode to set things up. Once things are set as you want them, you can update the actual page or make your private page public.
If you are using an older version of SquareSpace, the path to your Code Injection might look a little different.
So if a few steps do not look relevant for you, click here.
Part I
You will need a calendar or groups widget view. If you have not already created one, please do that before continuing this process.
Part II
Did you tell Display.Church (D.C) about your websites? If not, please do that now.
Part III
Embedding a Calendar or Groups widget View
Embedding a Calendar or Groups widget View
Step 1: Choose the calendar view you wish to embed on your SquareSpace website.
  | Step 1: Choose the groups widget view you wish to embed on your SquareSpace website.
|
 | Step 2: Is your calendar or groups widget view published yet (turquoise box and arrow in image to the left)?
If not, click on the Install tab (turquoise box in image below).
|
Step 3: Click on the downward arrow to open the dropdown menu.
Step 4: Click on Published (yellow arrow in image below).
 | Step 3: Click on the downward arrow to open the dropdown menu.
Step 4: Click on Published (yellow arrow in image below).
 |
 | Your calendar or groups widget view is now published. |
| Step 5: Still on the Install tab, note that there are several installation options:
Click on the Default setup. |
Default setup: Head install
NOTE
Steps 1-6 are one-time only. If you are embedding another calendar or groups widget view on the same website, scroll down and begin at Step 7.
 | Step 1: You will notice that there are three blue Copy buttons. We will begin with the top one (turquoise box in image to the left). This widget loader code needs to be installed in the head of your website. So click on Copy.
|
 | If you are using an older version of SquareSpace, the path to your Code Injection might look a little different. If steps 2-4 do not look relevant for you, click here.
Step 2: In SquareSpace, click on Settings (turquoise box in image to the left).
|
 | Step 3: Within the Settings menu, click on Advanced (turquoise box in image to the left). |
 | Step 4: Within the Advanced Settings menu, click on Code Injection (turquoise box in image to the left).
The Code Injection page will open.
|
FOR OLDER VERSIONS OF SQUARESPACE
If you are using an older version of SquareSpace, the path to your Code Injection might look a little different: Website --> Pages --> Website Tools --> Code Injection
Video does not have audio.
FOR EVERYONE, CONTINUE THE PROCESS
Step 5: Paste the code you copied from D.C. into the HEADER section.
| Step 6: Click Save to confirm your changes.
|
REMEMBER
You only have to do the above part once, regardless of the number of D.C widgets you embed. In other words, if you embed more than one calendar or group in this same website, you do not need to repeat this operation. You would begin with Step 7 below.
Default setup: Calendar or groups widget view install
 | Step 7: Return to the main Settings page (gold arrow in image to the left). |
You are now on your SquareSpace website page.
Step 9: Click on Add Block (gold box in image above).
| Step 10: Choose the Code block option. |
| Step 11: Position the block where you want you calendar or groups widget to display. |
Step 12: Double click on the block to open the content popup. This is where you will tell SquareSpace more about the calendar or groups view you wish to embed.
| Step 13: While in D.C, click on the 2a blue Copy button to copy the code to your clipboard (turquoise box in image to the left).
|
 | Step 14: Paste the code into the popup content space. |
 | Step 15: Click Save to confirm your action. |
Your calendar or groups widget is now displaying.
NOTE: If the preview shows that the calendar or groups widget view IS NOT displaying, then go back to the Install tab. Copy the code from the SECOND blue Copy button and try again. Still no luck? Contact us for support via our website chat.
Repeat Steps 9 - 15 to embed other calendar or groups widget views on the same webpage or other pages on your website.