What would you like to know more about?

Show Page Sections

Configuring Event Details and Registration

Quick Start

The Event Details & Registration Widget is used in tandem with the Event Finder Widget. Use both to help people find the event they want to attend. Then the Invoice & Payment Widget summarizes the transaction and sends it to the payment vendor. See Quick Start to get these up and running.

Note: Because the Event Details & Registration and Invoice & Payments Widgets work together, they must be set up at the same time to function correctly. See Finder Widgets + Details Widgets to learn more about how they interact.

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>

Add the Event Details & Registration Widget to your church website by placing this snippet of code in the body of your chosen webpage, modifying the required attributes.

<mpp-event-details returnurl="/events" checkouturl="https://www.example-church.com/index.php/checkout/" opportunityfinderwidgettargeturl="https://www.example-church.com/volunteer/"></mpp-event-details>
Tip: While not mandatory, this snippet would typically be placed inside a <div> element with the class "container".

Widget Configuration

Required Attributes

  • Return URL: This is the URL of the webpage that contains your Event Finder widget. This is required for your widget to function correctly.
    • Attribute: returnurl
    • Valid Value: relative or fully qualified URL
    • Examples:
      returnurl="https://www.example-church.com/events" returnurl="/events"
  • Checkout Target URL: The navigation path to the Invoice & Payment widget. Provides a summary of the invoice and total amount due. Double-check to make sure you're working with one of our verified vendors so people can register for your events!
    • Attribute: checkouturl
    • Example:
      checkouturl="https://www.example-church.com/index.php/checkout/"
  • Opportunity Finder Target URL: The navigation path to Opportunity Finder when "Volunteer" is enabled. The Event ID is appended to this path to filter for the specific Event.
    • Attribute: opportunityfinderwidgettargeturl
    • Valid Value: relative or fully qualified URL
    • Example:
      opportunityfinderwidgettargeturl="https://www.example-church.com/volunteer/"

Configure Your Widget

Fill out the Widget Configurator below, copy your generated widget code, and paste it into your website.

Platform Configuration

Events may be selected from the Event Finder Widget whenever they meet the following criteria:

  • Today's date is equal to or less than the Start Date.
  • For featured events, the Start Date is within the next 360 days. For all other events, the start Date is within 120 days.
  • Your event has been approved.
  • The Visibility is set to one of the following:
    • 2- Staff Only: Shows only for authenticated users who have at least one current Group Participant record (belonging to any Group of any Group Type) with Employee Role set to Yes.
    • 3- Staff & Church: Shows in the widget whether or not the user is logged in.
    • 4- Public: Shows for any individual.
      Note: The difference between Staff & Church and Public is determined by how you use events internally for views, filters, and reports.
      Tip: Is your event set to 5- Hidden: URL Required but still need to share a link to it? You can use this format to create the link: [URL of the Event Details widget]/?id=[Event_ID]

Review your eligible events to ensure they display as expected.

Events

  • Title: Event Title.
  • Date & Time: Event's Event Start Date and Event End Date.
  • Event Contact: Event's Primary Contact. If there is an image attached to the Primary Contact's contact record, it will display.
  • Meeting Instructions: Event's Meeting Instructions.
  • Location: Event's Location. If there is a latitude and longitude associated with the Location, a map will display.
  • Event Registration: Online Registration Product and Registration Form associated with the Event.
  • External Registration URL: If there is a value in this field, a "Register" button will display. Clear this field to hide that.
  • Force Login: If set to Yes, no registration options will be shown until the user logs in.
    Note: Registration confirmation is handled differently for paid and free events. For paid events, participants will be sent a receipt from your payment vendor. If you want participants to receive a registration confirmation for free events, add a template to the Registrant Message field.

Registration Considerations

  • Product Option Group Note Label: Displays before each option price.
  • The mpp-event-details.freePriceLabel application label: Displays as the "price" for free events. Default is "Free".
  • Payment Vendor: You'll select your payment vendor to process transactions and will no longer use an Authorize.net account.
    Important: To use the Event Details & Registration Widget, you have to work with one of our verified vendors. Check out the list of our verified vendors and, if you don't already work with one, reach out to get started.
  • Payment Details, Invoice, Invoice Detail, and Payment records will be created.

Attach a compelling image to the Event record, which will display in the widget. If there is no image, a stock image displays. File formats supported both by browsers and the Platform are: BMP, GIF, JPG, and PNG. The ideal ratio is 59/32. For reference, the finder images are 800x433 intrinsically but resized to fit at 295x160.

Customization

You can customize the Event Details & Registration. 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 "Register" to "Sign Up"? To make changes, go to System Setup > Application Labels and update the appropriate label(s). Note that you are responsible for all translations if the default is not used.

  • mpp-event-details.registerButtonText: Text on the Register button. Default is "Register".
  • mpp-event-details.registrationAddressLabel2: Address Line 2 Field label. Perhaps "Apt. or Suite #" suits you better? Default is "Address Line 2".
thumb_upYes thumb_downNo