WIX: Embedding your view

Here's how to embed your calendar or groups widget view on your WIX 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 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.

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

Click on the Wix option.

It will open up to this:

WIX setup

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

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

This widget loader code (code snippet) needs to be installed in your website. So click on Copy.

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

Step 3: 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 4: In the Head section, click on Add Code (gold oval in image below).

The Add Code box will open.

Step 5: Paste the D.C code snippet in the top section (gold box in image below).

Step 6: Give this code a memorable name (fuchsia box in image above).

Step 7: Click Apply to confirm your action (turquoise arrow in image above).

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

Step 8: Return to your Wix dashboard page.

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

You are now in your Wix website.

Step 10: 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 11: Once you are on your chosen website page, click on Add Elements (+ icon, gold box in image below).

Step 12: From the Add Elements menu, choose Embed Code (turquoise box in image below).

Step 13: From the embed options, choose Embed HTML (fuchsia box in image above).

Step 14: 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 15: Return to D.C, and click on the second blue Copy button to copy the code to your clipboard (turquoise box in image to the left).

Step 16: Paste the code into the Add your code here (HTTPS only) box.

Step 17: Click on Update to confirm your action.

Your Display.Church view should now display on your website page.

Step 18: Publish your changes.

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

Did this answer your question?