Skip to main content
All CollectionsCalendar: (3) Installation
Nucleus: Embedding your widget
Nucleus: Embedding your widget

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

Piotr Poźniak avatar
Written by Piotr Poźniak
Updated over a month ago

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

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):


​Option 1: Toggle on the Make this widget available to others button.
OR
Option 2: Click on the blue Publish button.

With Calendars, Groups, and Sign-in Forms you will see this:


With Event Alerts, 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 Nucleus button.

10. Then click the blue Next button.

11. Open the Installing Display Church on Nucleus section.

It will look like this (image below). Note the code snippet in #3. We will use that soon.

Step 11a: In your Nucleus dashboard, click on Settings (turquoise box in image to the left).

Step 11b: Within the Settings menu, click on Code Injection (turquoise box in image to the left).

The Code Injection page will open.

Step 11c: Go to D.C and copy the code from #3. Return to Nucleus and paste the copied code into the Paste your code here box.

Step 11d: Click Save Changes to confirm your action.

REMEMBER

Steps 11a-11b-11c-11d are one-time only. That is, you only have to do Step 11 once, regardless of the number of D.C widgets you embed. If you are embedding another calendar, groups widget, event alert, or sign-up forms widget on the same website, you would begin with Step 12 below.

12. Open the Adding [widget category] to selected page section. For example: Adding calendar to selected page.

It will look like this (image below). Note the code snippet in #2. We will use that soon.

Step 12a: Return to your Nucleus dashboard page (gold arrow in image to the left).

Step 12b: Click on Edit (turquoise box in image to the left).

You are now on your Nucleus website page.

Step 12c: Scroll down until you find the Page Content section. Add Block (gold box in image above).

Step 12d: Drag and drop an HTML block into the Page Content section.

Your Page Content section will now look like this:

Step 12e: While in D.C, copy the code snippet from #2.

Step 12f: Paste the code into the Custom HTML Block (turquoise box in image to the left) and NOT in the Page Content section (red X in image to the left).

Step 12g: Click Save Changes to confirm your action.

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?