This walkthrough will guide you in embedding your Display.Church (D.C) calendar or groups widget view on your WordPress 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 WordPress website.

Step 1: Choose the groups widget view you wish to embed on your WordPress 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

Although it is not recommended in general, we will start with the Quick setup as it gives the quickest results.

If you wish to jump to the Default setup, click here.

Quick setup

Why is this option not recommended?
It embeds a JavaScript file inside the web page. This makes it challenging to manage and may interfere with other widgets loading if you decide to add more than one widget on one page.

You will notice that there are two blue Copy buttons. We will begin with the top one.

Step 1: Click on the upper blue Copy button to copy the code to your clipboard.

Step 2: Navigate to your WordPress admin panel. Select the page on which you wish to embed your calendar or groups widget view. We chose Events.

The page will refresh to your website page.

Step 3: Choose Custom HTML from the block options.

Step 4: Paste the code from your clipboard into the relevant line.

Step 5: Click on Preview to make sure everything is working well.

As we can see, the calendar or groups widget view is successfully embedded in the website page.

Step 6: Update the page to save your action.

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? Continue below with the default setup.

Repeat this section to embed other calendar or groups widget views on the same webpage or other pages on your website.


Default setup

You will notice that there are three blue Copy buttons. We will begin with the top one.

This widget loader code needs to be installed in the head of your website.

While you can edit the WordPress theme yourself, we recommend using one of the existing plugins that do it for you. If your website is advanced, you most likely have such a plugin installed already.

If you do, jump to Default setup: Head install.

If not, here are your next steps.

Click on Plugins.

Click on Add New.

The Plugins page will open.

Click on Add New.

The Add Plugins page will open.

Type the keyword 'header script' into the Search bar.

The page will refresh to selections based on your keyword.

We will choose the first one. This is a random choice. We do not recommend this particular plugin. We only choose it because it's first on the list.

Click on the Install Now button.

Click on the Activate button.

Default setup: Head Install

Step 1: Navigate back to your Plugins page.

Find the relevant plugin. In our case, it is the one we just added (turquoise arrow in image to the left).

Step 2: Click on Code Snippets (gold box in image to the left). Depending on your plugin, the name may be different.

Step 3: Click on the blue Add New button.

Please remember: Your page may look different due to the plugin you are using.

The Add Snippet page will open.

Step 4: Find the relevant type. In our case, it is adding a custom code. Click on the blue Use snippet button (or whatever is relevant for your plugin).


Step 5: Navigate back to your DCE Install tab.

Step 6: Click on the upper blue Copy button to copy the code to your clipboard (turquoise box in image to the left).

Step 7: Navigate back to WP and paste the code into the relevant space.

Here is an example of what it might look like.

Step 8: Make sure the code type is an HTML Snippet.

Step 9: Make sure that the status is active.

Step 10: Give a meaningful title to this snippet to remind you what it is for.

Step 11: Save your snippet.

REMEMBER

You only have to do this 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.


Default setup: Calendar or groups widget view install

Step 1: Click on the 2a blue Copy button to copy the code to your clipboard (turquoise box in image to the left).

Step 2: Navigate to your WordPress admin panel. Select the page on which you wish to embed your calendar or groups widget view. We chose Events

The page will refresh to your website page.

Step 3: Choose Custom HTML from the block options.

Step 4: Paste the code from your clipboard into the relevant line.

Step 5: Click on Preview to make sure everything is working well.

As we can see, the calendar or groups widget view is successfully embedded in the website page.

Step 6: Update the page to save your action.

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 this section to embed other calendar or groups widget views on the same webpage or other pages on your website.

Did this answer your question?