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:

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.

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.

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.

Click on the Install Now button.

Click on the Activate button.

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.

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.

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.