This walkthrough will guide you in embedding your Display.Church (D.C) widget 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.
This video is based on an earlier version of our Install flow. Nevertheless, it should be useful.
Part I: Make sure you have a widget to embed
You will need a Display.Church widget (Calendar, Groups, Event Alerts, or Sign-up Forms). If you have not already created one, please do that before continuing this process.
Part II: Make sure you have a website to display it on
Did you tell Display.Church (D.C) about your websites? If not, please do that now.
Part III: Embed your widget
1. Log in to Display.Church.
| 2. Open the Widgets section if not already opened (blue box in image to the left). |
| 3. Choose the widget category required: Calendars, Groups, Event Alerts, or Sign-up Forms.
4. Inside your chosen category, open the item you wish to work with. |
OR
| 5. Make sure you are in the Install tab.
6. To publish your widget (if not already published):
|
With Calendars, Groups, and Sign-in Forms you will see this: 
| 7. Click on the blue Install button. |
8. After clicking the blue Install button, you will see the following display:
9. Click on the SquareSpace button.
10. Then click the blue Next button.
11. Open the Installing Display Church on SquareSpace section.
It will look like this (image below). Note the code snippet in #4. We will use that soon.
 | 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 11a: In SquareSpace, click on Settings (turquoise box in image to the left).
|
 | Step 11b: Within the Settings menu, click on Advanced (turquoise box in image to the left). |
 | Step 11c: 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 11d: Go to D.C and copy the code from #4. Return to SquareSpace and paste the copied code into the HEADER section.
| Step 11e: Click Save to confirm your changes.
|
REMEMBER
Steps 11a-11b-11c-11d-11e are one-time only. That is, you only have to do Step 11 once, regardless of the number of D.C widgets you embed. If you are embedding another calendar, groups widget, event alert, or sign-up forms widget on the same website, you would begin with Step 12 below.
12. Open the Adding [widget category] to selected page section. For example: Adding calendar to selected page.
It will look like this (image below). Note the code snippet in #6. We will use that soon.
 | Step 12a: Return to the SquareSpace main Settings page (gold arrow in image to the left). |
You are now on your SquareSpace website page.
Step 12c: Click on Add Block (gold box in image below).
| Step 12d: Choose the Code block option. |
| Step 12e: Position the block where you want your calendar, groups widget, event alert, or sign-up forms widget to display. |
Step 12f: Double click on the block to open the content popup. This is where you will tell SquareSpace more about the calendar, groups widget, event alert, or sign-up forms widget you wish to embed.
Step 12g: While in D.C, copy the code snippet.
 |
Step 12h: Paste the copied code into the SquareSpace popup content space. |
 | Step 12i: Click Save to confirm your action. |
Your Display.Church widget is now displaying.
NOTE: If the preview shows that the widget IS NOT displaying, contact us for support via our website chat.
Repeat Steps 12a-12i to embed other Display.Church widgets on the same webpage or other pages on your website.