This walkthrough will guide you in embedding your Display.Church (D.C) calendar, groups widget, event alert, or sign-in forms widget on your WIX 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):
|
With Calendars, Groups, and Sign-in Forms 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 Wix button.
10. Then click the blue Next button.
11. Open the Installing Display Church on Wix section.
It will look like this (image below). Note the code snippet in #4. We will use that soon.
| Step 11a: In your Wix dashboard, click on Settings (turquoise arrow in image to the left).
|
| Step 11b: Within the Settings menu, scroll down to the Advanced section and click on Custom Code (turquoise box in image to the left). |
The Custom Code page will open.
Step 11c: In the Head section, click on Add Code (gold oval in image below).
The Add Code box will open.
Step 11d: Copy the D.C code snippet ...
...and paste it in the top section (gold box in image below).
Step 11e: Give this code a memorable name (fuchsia box in image above).
Step 11f: Click Apply to confirm your action (turquoise arrow in image above).
REMEMBER
Steps 11a-11b-11c-11d-11e-11f 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 #5. We will use that soon.
| Step 12a: Return to your Wix dashboard page. |
You are now in your Wix website.
Step 12c: In the Site Menu, click on the page in which you wish to embed your D.C view. We are choosing the Events page. (see image above)
Step 12d: Once you are on your chosen website page, click on Add Elements (+ icon, gold box in image below).
Step 12e: From the Add Elements menu, choose Embed Code (turquoise box in image below).
Step 12f: From the embed options, choose Embed HTML (fuchsia box in image above).
Step 12g: You may wish to adjust the element size, so it fits nicely on your page.
Now we need to add some more HTML code in the Add your code here box.
Step 12h: Return to D.C, and copy the snippet in #5.
| Step 12i: Paste the code into the Add your code here (HTTPS only) box.
Step 12j: Click on Update to confirm your action. |
Your Display.Church widget is now displaying.
NOTE: If the preview shows that the widget view IS NOT displaying, contact us for support via our website chat.
Step 12k: Publish your changes.
Repeat Steps 12a-12k to embed other Display.Church widgets on the same webpage or other pages on your website.