This walkthrough will guide you in embedding your Display.Church (D.C) calendar or groups widget view on your SquareSpace website.

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:

  • A default setup

  • A setup for Wix

  • A Quick setup

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.

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.

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).

Step 8: Click on Edit (turquoise box 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.

Did this answer your question?