WordPress: Embedding your widget

This walkthrough will guide you in embedding your Display.Church (D.C) calendar, groups widget, event alert, or sign-in forms widget on your WordPress website.

2024.03.22: Sometimes, new embeds do not show up in on builder pages until published. We suggest using a test page or private mode to set things up. Once things are set as you want them, you can update the actual page or make your private page public.

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 WordPress button.

10. Then click the blue Next button. The screen will refresh and look like this (image below). Note the two code snippets. We will use them soon.

Step 11. Installing Display Church on WordPress

Step 11 is one-time only. That is, you only have to do it 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 Widget Embed below.

SELECTING A PLUGIN

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 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.

Head Install

	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). 2: Click on Code Snippets (gold box in image to the left). Depending on your plugin, the name may be different.
	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. 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).
	5: Navigate back to D.C. Copy the snippet from #1. 6: Navigate back to WP and paste the copied code into the relevant space.

Here is an example of what it might look like.

	7: Make sure the code type is an HTML Snippet.
	8: Make sure that the status is active.
	9: Give a meaningful title to this snippet to remind you what it is for.
	10: Save your snippet.

Step 12: Widget Embed

This section embeds your calendar, groups widget, event alert, or sign-in forms widget on your Wix website. Repeat for each widget you wish to embed.

1. In D.C, copy the HTML5 object from #2.

	2: Navigate to your WordPress admin panel. Select the page on which you wish to embed your calendar, groups widget, event alert, or sign-in forms widget. We chose Events
	The page will refresh to your website page.
	3: Choose Custom HTML from the block options.
	4: Paste the copied HTML5 object into the relevant line.
	5: Click on Preview to make sure everything is working well.

6: Update the page to save your action.

NOTE: If the preview shows that the widget IS NOT displaying, contact us for support via our website chat.

Install

The Church Co: Embedding your widget

SquareSpace: Embedding your widget

Nucleus: Embedding your widget

WIX: Embedding your widget