This walkthrough will guide you in embedding your Display.Church (D.C) calendar or groups widget view on your The Church Co 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.
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 The Church Co website.
  | Step 1: Choose the groups widget view you wish to embed on your The Church Co 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:
Although it is not recommended in general, we will start with the Quick setup as it gives the best results.
|
Quick setup
| Why is this option not recommended?
You will notice that there are two blue Copy buttons. We will begin with the top one. |
| Step 2: Navigate to your The Church Co dashboard and click on Pages .
|
| Step 3: Select the page on which you wish to embed your calendar or groups widget view. We chose the Displaychurch.Events page we created earlier (our previous platform name).
Step 4: Choose Visual Editor. |
| Step 5: Click on New Page Builder Block. |
| Step 6: Select an HTML Embed block. The block will open.
|
| Step 7: Click on the Code tab. |
Step 8: Paste in the HTML code from your clipboard.
 | Step 8: Click Save to confirm your action. |
As we can see, the calendar or groups widget view is successfully embedded in the website page.
.
.
.
You may notice two things:
(1) The calendar or groups widget view displays in the narrow section. It's squeezed and does not look appealing.
(2) It may not look exactly the same as it does on Display.Church.
Let's address both of these issues:
Narrow Spacing
NARROW SPACING
This is because the ChurchCo theme is narrow, but we can expand that block. We can do this with the custom CSS Styles. If you are not tech-savvy- don't worry. It's easy.
Step 1: Click on the HTML block you just added. It will open.
Step 2: Click on the Settings tab (turquoise box in image below).
Step 3: On the CSS Classname line (gold box in image above), type in any meaningful name.
Step 4: Return to your Dashboard.
Step 5: Click on Design & Themes.
Step 6: Click on Additional CSS.
Step 7: In the blank white space, you want to type in the same name you used in Step 3 + the necessary code --
In our example, it would look like this:
.display-church-embed .row-content {
width: 100%;
margin-left: 0;
}
So, just replace '.display-church-embed' with the name you used in Step 3.
Step 8: Click on Publish.
Step 9: Go back to the same page as in Step 5 (the page we added the HTML block to) and click Save.
The page will refresh to show you a full width calendar or groups widget view.
Different Look
This is because The Church Co applies its own styling to the embedded items displayed on website pages created with its platform.
If the changes do not work for you, here is what to do.
Step 1: Return to the Display.Church Install tab.
Calendar View | Groups Widget View |
Step 2: Copy the code from the bottom section -- the section which says 'EXPERIMENTAL' in red. 
| Step 2: Copy the code from the bottom section -- the section which says 'EXPERIMENTAL' in red. 
|
Step 3: Return to The Church Co website builder -- the same HTML block you were on before.
Step 4: Erase the HTML code you pasted there just before. Paste the new 'Experimental' HTML code in its place.
| Step 5: Click Save to confirm your action. |
The calendar or groups widget should now look identical to the one on Display.Church.
You may repeat the necessary steps to embed further calendars or groups widget views on any of your The Church Co website pages. f
Having trouble? Contact us for support via our website chat.