The Opportunity Detail Widget is used in tandem with the Opportunity Finder Widget. Review Quick Start for how they work together and 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 that will display your Opportunity Details or identify the page on your website where it will be displayed.
Add the Opportunity Details Widget to your church website by placing this snippet of code in the body of your chosen webpage.
<mpp-opportunity-details
returnurl="/opportunities">
</mpp-opportunity-details>
Return URL: Defines the path back to the Opportunity Finder and is required for the Opportunity Detail Widget to function correctly. It can be a relative or fully qualified url.
The following are valid examples of the widget using different return URLs:
<mpp-opportunity-details returnurl="https://www.ministryplatform.com/opportunities"></mpp-opportunity-details>
<mpp-opportunity-details returnurl="/opportunities"></mpp-opportunity-details>
Simply fill out the Widget Configurator below, copy your generated Widget, and paste it into your website.
Opportunities may be selected from the Opportunity Finder Widget whenever they meet the following criteria:
Review your eligible Opportunities to ensure they display as expected.
You can customize the Opportunity Details 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 the button to "Sign Up" instead of "Submit Response"? 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).