All Collections
Calendar: (3) Installation
Nucleus: Embedding your view
Nucleus: Embedding your view

Here's how to embed your calendar or groups widget view on your Nucleus website.

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

This walkthrough will guide you in embedding your Display.Church (D.C) calendar or groups widget view on your Nucleus website.

Part I

You will need a calendar or groups widget view. If you have not already created one, please do that before continuing this process.

Part II

Did you tell Display.Church (D.C) about your websites? If not, please do that now.

Part III

Embedding a Calendar or Groups widget View


Embedding a Calendar or Groups widget View

Step 1: Choose the calendar view you wish to embed on your Nucleus website.

Step 1: Choose the groups widget view you wish to embed on your Nucleus website.

Step 2: Is your calendar or groups widget view published yet (turquoise box and arrow in image to the left)?

If not, click on the Install tab (turquoise box in image below).

Step 3: Click on the downward arrow to open the dropdown menu.

Step 4: Click on Published (yellow arrow in image below).

Step 3: Click on the downward arrow to open the dropdown menu.

Step 4: Click on Published (yellow arrow in image below).

Your calendar or groups widget view is now published.

Step 5: Still on the Install tab, note that there are several installation options:

  • A default setup

  • A setup for Wix

  • A Quick setup

Click on the Default setup.

Default setup: Head install

***NOTE: Steps 1-5 are one-time only. If you are embedding another calendar or groups widget view on the same website, scroll down and begin at Step 6.

Step 1: You will notice that there are three blue Copy buttons. We will begin with the top one (turquoise box in image to the left).

This widget loader code needs to be installed in the head of your website. So click on Copy.

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

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

The Code Injection page will open.

Step 4: Paste the code you copied from D.C. into the Paste your code here box.

Step 5: Click Save Changes to confirm your action.

REMEMBER

You only have to do the above part once, regardless of the number of D.C widgets you embed. In other words, if you embed more than one calendar or group in this same website, you do not need to repeat this operation. You would begin with Step 6 below.

Default setup: Calendar or groups widget view install

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

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

You are now on your Nucleus website page.

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

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

Your Page Content section will now look like this:

Step 10: While in D.C, click on the 2a blue Copy button to copy the code to your clipboard (turquoise box in image to the left).

Step 11: 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 12: 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.

From the above image, we can already see that our view is displaying. Let's scroll down...

Looking good!

NOTE: If the preview shows that the calendar or groups widget view IS NOT displaying, then go back to the Install tab. Copy the code from the SECOND blue Copy button and try again. Still no luck? Contact us for support via our website chat.

Repeat Steps 6 - 12 to embed other calendar or groups widget views on the same webpage or other pages on your website.

Did this answer your question?