home

MinistryPlatform

RealmRealm AccountingMinistryPlatformGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite
RealmRealm AccountingMinistryPlatformGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite

What would you like to know more about?

Show Contents

thumbnailMinistryPlatform

Widgets

Specific CMS Tips

Widgets are designed to live on your website. The steps for getting started with widgets are very similar for each CMS. However, there are some nuances and information unique to each CMS.

Note: Widgets can be added to a website with very little coding knowledge. But, it is highly likely you will need to work closely with your web staff, team, or vendor to successfully integrate widgets into the existing ecosystem of your church website.

Refresh Websites

Don't have a CMS yet? With Refresh Websites, you can easily build a personalized, professional, mobile-friendly website using templates with drag-and-drop formatting. Refresh Websites includes unlimited users, unlimited pages, custom forms, a graphics library and editor, and website analytics. Check them out! For additional information, see Build Your Website With MinistryPlatform Widgets.

eCatholic

When adding widgets that have drop-down menus (such as the Login widget), make sure the Text/HTML content space is sized appropriately so that the drop-down menu is not cut off.

After adding widgets to your eCatholic site, we recommend opening a new browser window in Incognito mode to view and test your widgets. Otherwise, you must fully log out of all eCatholic windows in order to view your newly added widgets properly.

Ekklesia 360

To get widgets up and running using Ekklesia 360 CMS:

FaithConnector and Joomla

Widgets work well with FaithConnector or Joomla, but you may need to customize certain widget parameters in order to pass the URL. Some of our widgets use ?id= followed by a record ID, but this isn't always compatible with FaithConnector or Joomla.

To help pass the record ID correctly, customize the following configuration settings. This will replace the parameter in the URL when a record ID is passed in the widget.
Tip: We recommend entering a parameter name value that is short and sweet. It should be something other than "id" and does not need to include the question mark or equal sign.

Squarespace

To get widgets up and running using Squarespace CMS:

  • Confirm you're using the version that allows injection.
  • Site Settings > go to injection > Add Header Code.
  • From a page:
    • Click the "+" to add an element.
    • Choose "Code".
    • Add the widget code.
    • Make sure you added <div></div> tags around the widget code.
    • Click "Hide Code".
    • Save.
  • Enjoy your shiny new widget!

Subsplash

Unfortunately, Subsplash does not support widgets. However, some churches have had success using widgets with Subsplash when they don't apply any CSS. You can follow the instructions in the Quick Start guide and see if it works for your church!

Weebly

To use widgets with Weebly CMS:

  • When adding the widget to your Weebly website, make sure you add <div></div> tags around the widget code.

Wix

Your Wix website must:
  • Have a premium plan with no advertising.
  • Have a custom domain.
  • Be configured in the permitted URL list for your MinistryPlatform instance.
Preparation:
  1. Go to the Widgets section of the Help Center, and locate the configuration topic for the widget you want to add. (For example, Configuring Event Finder.)
  2. Make note of the script src where the MPWidgets.js file is located.

    Example: Example showing the code <script id="MPWidgets" src="https://example-church.com/widgets/dist/MPWidgets.js"></script> with an underline under https://example-church.com/widgets/dist/MPWidgets.js

  3. Make note of the widget name.

    Example: Example showing the code <mpp-event-finder targetURL="https://example-church.com/event-details"></mpp-event-finder> with an underline under mpp-event-finder

  4. Make note of the attribute name and value (which are listed before and after the equal sign) that may be available.

    Example: Example showing the code <mpp-event-finder targetURL="https://example-church.com/event-details"></mpp-event-finder> with an underline under targetURL and https://example-church.com/event-details

Wix Site Configuration:
  1. From your Wix Dashboard, go to Settings > Custom Code.
  2. In the Head section, click Add Code.
  3. For Past the code snippet here, paste the script code from Preparation step 2.
  4. For Name, enter "MPWidgets".
  5. In the Add Code to Pages section, select All pages, and select Load code on each new page from the drop-down list.
  6. Click the Code Type tab, and select Essential.
  7. Click Apply.

    Example: Example showing the Edit Custom Code screen with options on the Code Settings tab Example showing the Edit Custom Code screen with options on the Code Type tab

Wix Pages Configuration:
  1. Create a Wix page for each widget.
  2. Add a new Custom Element to each page. From the Embed Code section, select Custom Element.

    Example: Example showing the Wix page configuration where you can add elements with the Embed Code section enabled and the Custom element item selected

  3. With the Custom Element selected, click Choose Source.
  4. Select Server URL, and enter the address of your MPWidgets.js file.

    Example: Example showing the Wix page configuration where you can edit element attributes with the Server URL option selected and the Server URL entered as the location of the MPWidgets.js file

  5. Scroll to the bottom of the window. For Tag name, enter the name of the widget from Preparation step 3.
  6. With the Custom Element selected, click Set Attributes.
    1. Click Set Attributes.
    2. For Attribute Name, enter the first parameter name. (For example, "targetURL".)
    3. For Value, enter the parameter name. (For example, "/event-details".)
    4. Click Set.

    Example: Example showing the Wix page configuration where you can set the attributes of the custom element with the Attribute name entered as TargetURL and the Value entered as /event-details

  7. If the widget you're adding has multiple parameters, click New Attribute and repeat the steps to set the attributes.
  8. Repeat these steps for each widget you want to add to your website.

Wix Finalization:

  1. Review everything you set up, and make sure you're ready to publish your website.
  2. Publish your Wix website.
  3. Review your live site, and make sure everything displays as expected.

Wordpress

To get widgets up and running using Wordpress CMS:

  • We recommend taking advantage of the option to place the shared script in an element that appears on every page (for example, in your website header) to avoid having to add that script to each and every page where a will widget live.
  • When adding specific widgets to pages, place them in block type "custom HTML".
  • If preferred, switch from "Visual Editor" to "Code Editor".
  • We've added a Header/Footer plugin so that a header displays on each page.

Using a different CMS? Let Support know your tips and specific steps you follow so we can share with the community! Or, let Support know where you're struggling and we'll see if we can help you work with your CMS vendor.

Note: Unfortunately, we have not been able to integrate widgets with Google Sites. We're sorry for the inconvenience if you use this as your CMS.
portal
MinistryPlatform

Last updated: February 25, 2025

Related Articles: