This walkthrough will guide you in embedding your Display.Church (D.C) calendar, groups widget, event alert, or sign-in forms widget 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.
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 The Church Co button.
10. Then click the blue Next button. The screen will refresh and look like this (image below). Note the code snippet in #7. We will use that soon.
11. Embed Your Widget
| Step 11a: Navigate to your The Church Co dashboard and click on Pages .
|
| Step 11b: Select the page on which you wish to embed your calendar, groups widget, event alert, or sign-in forms widget. We chose the Displaychurch.Events page we created earlier (our previous platform name).
Step 11c: Choose Visual Editor. |
| Step 11d: Click on New Page Builder Block. |
| Step 11e: Select an HTML Embed block. The block will open.
|
| Step 11f: Click on the Code tab. |
Step 11g: In D.C, copy the snippet from #7. Go back to The Church Co, and paste in the copied code.
 | Step 11h: Click Save to confirm your action. |
You may notice two things:
(1) The calendar, groups widget, event alert, or sign-in forms widget 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, groups widget, event alert, or sign-in forms widget.
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 calendar, groups widget, event alert, or sign-in forms widgets on any of your The Church Co website pages.
Having trouble? Contact us for support via our website chat.