Skip to main content

Nucleus: Embedding your widget

Here's how to embed your calendar, groups widget, event alert, or sign-in forms widget on your Nucleus website.

Written by Ellie M.

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: Enable custom row styling

In the Nucleus editor, make sure Custom Row Styling is selected in the sizing or styling section for the embedded content area.

This helps the Display.Church widget display properly within the Nucleus page layout.

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.

NOTE: If the preview shows that the calendar, groups widget, event alert, or sign-up forms widget IS NOT displaying, contact us for support via our website chat.

Repeat Steps 12a-12g to embed other Display.Church widgets on the same webpage or other pages on your website.

Did this answer your question?