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).
Notice that there are two sections:
Recommended installation & Experimental installation (Fallback Method)
11. Open the Recommended installation option. Note the code snippet in #7. We will use that soon.
12. Embed Your Widget
| Step 12a: Navigate to your The Church Co dashboard and click on Pages .
|
| Step 12b: 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 12c: Choose Visual Editor. |
| Step 12d: Click on New Page Builder Block. |
| Step 12e: Select an HTML Embed block. The block will open.
|
| Step 12f: Click on the Code tab. |
Step 12g: In D.C, copy the snippet from #7. Go back to The Church Co, and paste in the copied code.
 | Step 12h: 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 The Church Co styling does not work for you, here is what to do.
Step 1: Return to the Display.Church Install calendar widget screen. Open the Experimental installation option (blue arrow and box in image below).
Note the code snippet in #7. We will use that soon.
Step 2: Return to The Church Co website builder -- the same HTML block you were on before.
Step 3: Erase the HTML code you pasted there just before. Copy and paste the new 'Experimental' HTML code (from Display.Church) in its place.
| Step 5: Click Save to confirm your action. |
Your widget display in your website should now look identical to the display on Display.Church.
Got more widgets to embed?
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.