Ready to start using Widgets?

You can configure Widgets on your website by completing these steps on Shared Configuration (script and permitted URLs), and then check out the steps for configuring each specific Widget (code snippet and attributes).

Excited to see it in action? We've got you covered! Just skip ahead and watch the Adding Your First Widget to Your Website video. Then come back and read all about it.

Steps to Setup Shared Configuration

1. Set Permitted URLs

Any website where a Widget is placed must be included in your "permitted URLs" list. Simply contact Support to add, change, or remove permitted URLs.

Looking for more details? See Enabling Widgets for an in-depth description.

2. Enable Widgets on Your Website

All widgets are powered by a shared script that needs to be added to any page where you want to use a Widget. Tip: If you add the shared script to your website header, widgets will be available on all pages.

Add the shared script in three steps:

1. Find your church's base MP URL. If your MinistryPlatform URL is https://ministryplatform.com/mp, your base MP URL is https://ministryplatform.com/. 
2. Create your shared script by replacing "{your platform domain}" in the script below with your base MP URL.
3. Add your shared script to the website header using your church's website management software (CMS). If this isn't possible in your CMS, add the script to any page that will contain Widgets.

<script id="MPWidgets" src="https://{your platform domain}/widgets/dist/MPWidgets.js"></script>

3. Identify (or Create) Your Webpage

Widgets live on websites, so figure out where they should appear. Some widgets are foundational (for example, Login and Languages & Locale). It would be helpful to have these on every page. Other widgets will live on a specific page. In the example below, we'll put the Event Finder widget on an Events page.

4. Configure Your Widget

While some widgets allow for optional elements, like filtering by attributes or a URL, you can get a widget up and running with the same basic steps: add, configure, and review.

1. Add the Event Finder element to the page.
2. Configure the Event Finder with the target url (the event detail page on your website).

3. Review and configure the other options for this widget.

<mpp-event-finder targeturl="https://{your website domain}/event-details"></mpp-event-finder>

Want to know more about customizing your Event Finder widget? See Configuring Event Finder Widget for more about filtering by attributes and URLs.

5. Configure Your Platform Records

Now that your widget is happily living on its webpage (yay!), take some time to make sure it's accurate. Each widget will need its own Platform configuration, but for our Event Finder example, it's useful to filter by Congregation and/or Ministry. Want users to be able to filter by campus? Make sure the desired Congregations have the Available Online field set to "True." Want to allow filtering by Ministry? Set the Available Online field to "True" for the desired Ministries.

Other Considerations

The information displayed on your widget comes directly from the Platform. Make sure the relevant Platform records are correct and up-to-date (names, titles, dates, descriptions, etc.). For our Event Finder example, make sure the start and end dates are correct (and within the next 120 days), that the visibility allows the event to be viewed online, and that it has been approved. Attaching a compelling image to your Event will significantly up the widget wow-factor.

Videos

Adding Your First Widget to Your Website

Adding a Finder + Detail Widget Pair to Webpages

Check back later this fall for a video talk-through on setting up Finder + Detail Widget pairs!

Adding Foundational Widgets to Multiple Webpages