Quick Start

The Opportunity Finder Widget is used in tandem with the Opportunity Details Widget. See Quick Start to get them both up and running. 

If the shared script hasn't been added to your website, add it to your desired webpage. Be sure to replace "{your platform domain}" in the following code with your church's base MP URL.

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

Create a webpage on your website to display your Opportunity Finder Widget or identify the page on your website where it will display.

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 are necessary for your Widget to function correctly.

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 target URL.
• Valid Values: Relative or fully qualified URL.

<mpp-opportunity-finder target="https://ministryplatform.com/opportunity-details"></mpp-opportunity-finder>

<mpp-opportunity-finder targeturl="https://ministryplatform.com/opportunity-details"></mpp-opportunity-finder>

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 appends 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://ministryplatform.com/opportunity-details?id=25 

Advanced Routing Options 

If you prefer to use more advanced routing, you can use URLs that look like the example below. 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://ministryplatform.com/opportunity-details/25 

Platform Configuration

Opportunities display in the Opportunity Finder Widget if they meet the following criteria:

• Today's date is on or after the Publish Date. 
• Today's date is before the Opportunity Date (if defined).  
• The Ministry associated with the Opportunity has Available Online set to "Yes". Pro Tip: To determine which Ministry is associated with the Opportunity, you can:
  
  • Find the Program associated with the Opportunity on the Opportunity record.
  • Click on the link next to the Program name to be taken to the Program record.
  • Find the Ministry name on the Program record.
• The Visibility Level is either:
  • Staff: 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).
  • Public: Visible for any user. 
• The total number of placed Responses is less than the Max Needed value. An Opportunity does not display in the Finder once the number of Placed Responses is equal to or greater than the Max Needed.
• Note: If you want to filter your Opportunity Finder based on a Congregation, that Congregation must be available online. If it is not, all of your Opportunities will display.

Review your eligible Opportunities to ensure they display as expected.

• Title: Opportunity Title.
• When: Opportunity Date. If blank, this is replaced with "Ongoing".
• Description: Opportunity Description. Line breaks are supported.
• Location: Populated from the Program's Congregation.
  
• Contact Person: 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 record so it displays in the widget. If there is no image, a stock image displays. The following file formats are supported by browsers and the Platform: bmp, gif, jpg, and png. The widget software crops and focuses on the center of the image according to an ideal ratio of 59/32. The finder images are 800 x 433 intrinsically but resize to fit at 295 x 160. We do not recommend using images with a transparent background; this results in a gray background in the widget.

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. Note that you can limit which Attributes are available for selection (without affecting the Opportunity record) by enter the Attribute IDs in the Widget Configurator.

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? You can do that! Navigate to System Setup > Application Labels and update the label to fit your context (note that churches 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."