Configuring Opportunity Finder
Quick Start
If the shared script hasn't been added to your website, add it to the appropriate webpage, replacing "example-church.com" with the base URL of your church's website.
<script id="MPWidgets" src="https://example-church.com/widgets/dist/MPWidgets.js"></script>Create a webpage on your website that will display your Opportunity Finder Widget or identify the page on your website where it will be displayed.
Add the Opportunity Finder Widget to your church website by placing this snippet of code in the body of your chosen webpage, modifying the required attributes.
<mpp-opportunity-finder
target="/opportunity-details">
</mpp-opportunity-finder>Widget Configuration
Required Attributes
- Target URL: The target URL determines the navigation path to Opportunity Details and is required. When a specific Opportunity is selected, the ID is appended to this path.
- Attribute: target or targeturl
- Valid Value: relative or fully qualified URL
- Example:
targeturl="https://example-church.com/opportunity-details"
Recommended URLs
The easiest way to set up interaction between the finder and detail is to use query string parameters to identify Opportunities. To use this method, specify a target URL (with or without a trailing slash). The Opportunity Finder Widget will append a query string and an Opportunity ID to the target URL. For example, for the target URL "/opportunity-details" the link to Opportunity 25 would look like this:
https://example-church.com/opportunity-details?id=25
Advanced Routing Options
If you prefer to use more advanced routing, you can use different URLs. This may be an option if the query string method does not integrate well with your CMS. In this case, you must:
- Define a route in your website to support the ID.
- Use a target URL with or without a trailing slash.
For the target URL "/opportunity-details/" the link to Opportunity 25 would look like this:
https://example-church.com/opportunity-details/25
Configure Your Widget
Fill out the Widget Configurator below, copy your generated widget code, and paste it into your website. For more information about the filter parameters, see Filtering Opportunity Finder
Platform Configuration
Opportunities may be selected from the Opportunity Finder Widget whenever they meet the following criteria:
- Today's date is equal to or greater than the Publish Date.
- Today's date is less than the Opportunity Date (if defined).
- The Ministry associated with the Opportunity must have Available Online set to Yes.
Tip: To determine which Ministry is associated with the Opportunity:
- Find the Program associated with the Opportunity on the Opportunity record.
- Click the link next to the Program name to go to the Program record.
- Find the Ministry name on the Program record.
-
The Visibility Level is either:
- 2- Staff Only: Visible only for authenticated users with at least one current Group Participant Record where Employee Role is set to Yes (belonging to any Group of any Group Type).
- 4- Public: Visible for any user.
- The total number of placed Responses is less than the Max Needed value. An Opportunity will disappear from the Finder when the number of Placed Responses is equal to or greater than the Max Needed.
Review your eligible Opportunities to ensure they display as expected.
- Title: The Opportunity Title .
- When: The Opportunity Date. If blank, this is replaced with "Ongoing".
- Description: Opportunity Description. Line breaks are supported.
- Location: This field is populated from the Program's Congregation.
- Contact Person: The individual responsible for following up with people interested in the Opportunity. If configured, they will be notified when there is an opportunity response.
- Remaining Need: Displays the number of Responses still needed. This is calculated as the total number of Responses (which have a Response Result value of "Placed") subtracted from the Maximum Needed.
- Response Message: An optional message that can be sent to the interested volunteer.
Attach a compelling image to the Opportunity, which will appear in the widget. If there is no image, a stock image will be displayed. Images can be added to use as the Opportunity image by attaching as a file to the Opportunity record via the Platform. File formats supported both by browsers and the Platform are: bmp, gif, jpg, and png. The widget software will crop and focus on the center of the image according to an ideal ratio of 59/32. The finder images are 800x433 intrinsically but resized to fit at 295x160.
If you choose to show the Attribute Filter (which allows users to filter opportunities by Attribute Type), make sure you add the appropriate Attributes on the Attributes tab of the Opportunity record.
Customization
You can customize the Opportunity Finder Widget (or any Widget!) to be consistent with your branding, look, and feel.
CSS: Every Widget accepts the Custom CSS attribute. Include it before the opening Widget tag is closed and customize backgrounds, button colors, and more.
Application Labels: Want to change Campus to Site? To make changes, go to and update the appropriate label(s). Note that you are responsible for all translations if the default is not used.
- mpp-opportunity-finder.congregationLabel: Campus field label. Default is "Campus".
- mpp-opportunity-finder.seeDetailsButtonText: Text on the See Details button. Default is "See Details".