This walkthrough will guide you in embedding your Display.Church (D.C) calendar, groups widget, event alert, or sign-in forms widget on your Nucleus website.
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
Step 1: Open your widget in Display.Church
Log in to your Display.Church account and open the widget you want to add to your Nucleus website.
Make sure you are using the Published version of the widget.
Step 2: Open the installation instructions
Click Install Widget.
In the installation window, select Nucleus as your platform.
Then click Next.
Display.Church will show the installation instructions for Nucleus.
Step 3: Copy the Display.Church script
In the Nucleus installation instructions, copy the script using the copy button.
You will need to add this script inside your Nucleus website’s custom code area.
Step 4: Add the script to Nucleus
Log in to your Nucleus account and go to your website editor.
Open the website or page where you want the Display.Church widget to appear.
Then go to the custom code area.
Add a new code section and choose JavaScript as the code type.
Paste the Display.Church script into this JavaScript section.
Save your changes.
Step 5: Add the widget to your page
After adding the script, go back to the page section where you want the widget to display.
Add an HTML Embed or Custom HTML content block to that section.
Then return to the Display.Church installation instructions and copy the widget element or embed code.
Paste that code into the HTML embed section in Nucleus.
Step 6: Configure the embed block
After pasting the Display.Church embed code into Edit HTML, set the block’s Sizing to:
Custom (Raw)
Additional step for Calendar widgets
If you are adding a Display.Church Calendar to a selected page in Nucleus, there is one additional setting needed to make sure the calendar displays correctly.
Under Style Media:
Go to Layout and select Embed Only (Layout 6).
Go to Custom Code.
Select Custom Code (CSS).
Add the following:
.nucleus-block-embed { display: block; }This helps prevent display issues such as the calendar slider being constrained or showing an unwanted scrollbar.
Then keep your existing Save and Preview section immediately after this as the next step.
Step 7: Save and preview
Save your changes in Nucleus.
Then preview or publish the page to confirm that your Display.Church widget is showing correctly.
Your Display.Church widget should now be visible on your Nucleus website.
Need help? Contact our support team and we’ll be happy to assist.
You may not see your changes in the Preview. So visit your Nucleus website to confirm that all is ok.
Having trouble with a Calendar widget?
If your calendar is not displaying correctly, appears constrained, or shows an unwanted scrollbar, first confirm that the embed block is set to Custom (Raw) and that the CSS from Step 6 has been added.
If you're still having trouble, contact our support team and we'll be happy to help., contact us for support via our website chat.
Repeat Steps 1-5 to embed other Display.Church widgets on the same webpage or other pages on your website.