What would you like to know more about?

Show Page Sections

Configuring Login

Set up the Login widget.

Get the Login widget up and running quickly to use other widgets that require people to log in. See the Quick Start Guide to get started.

If the shared script hasn't been added to your website, add it to the appropriate webpage, replacing "YOUR-BASE-MP-URL" with the base URL with your base MinistryPlatform URL.

<script id="MPWidgets" src="https://YOUR-BASE-MP-URL.com/widgets/dist/MPWidgets.js"></script>

Create or identify a page on your website where you want to display the widget. To add this widget to your church website, add the code you generate in the Widget Configurator widget (with the required attributes) in the body of your chosen website page.

<mpp-user-login></mpp-user-login>
Tip: While not mandatory, this snippet would typically be placed inside a <div> element with the class "container".

Widget Configuration

If you use any widgets that require people to log in (like My Groups, My Household, My Subscriptions, and so on), include the Login widget on the same page. But even if you only use widgets that don't require people to log in, we recommend the Login widget.

The Login widget always includes the option to log out and view and edit the person's information through the My Profile link.

To extend the drop-down list to include additional navigation items, add anchor tags inside of the widget tags. These links display as menu items if the person is logged in.
  • You can include multiple anchor tabs inside the widget tags.
  • When you edit the following to include your church's website, this displays an About Us menu item when a person is logged in:
    <mpp-user-login><a href="https://example-church.com/aboutus">About Us</a></mpp-user-login>

Configure Your Widget

Use the Widget Configurator widget to configure your widget:
  1. Go to your Widgets Library by appending "/widgets" to your system domain. For example, https://example-church.ministryplatform.net/widgets.
  2. Click the Navigate to... drop-down menu, and select Widget Configurator.
  3. Select the widget you want to configure, then customize your widget.
  4. Click Try it Out to see what your widget will look like!
  5. Copy the generated code from the Embed Code box.
  6. Add the code to the designated page on your website.

Platform Configuration

The Login widget uses the standard MinistryPlatform login flow to access different applications, so consider the following:
  • Anyone that visits your church website can create an account using the login flow. Their account will have no security roles (which means no access) until an administrator assigns them.
  • Anyone that visits your church website can reset their password using the login flow. Your password requirements display when the person is resetting their password.
  • To create or reset a password, you must the password requirements as determined on the domain record.
    Tip: Help your congregants out and put your password requirements in your account recovery email.
  • You can use any social login (defined as identity providers) configured for use with existing MinistryPlatform applications.

Review your domain and accounts settings for text message configuration, user account settings, and user account emails related to logging in. For details, see Login, Create Account, & Password Reset.

Customization

Customize the Login widget to change button colors, update labels, and more to match your church brand.

CSS: Every widget accepts the Custom CSS attribute. Include it before the closing of the opening widget tag to customize backgrounds, button colors, and more!

Application Labels: Want to change "Log In" to "Hi There!" instead? 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-user-login.loginButtonLabel: The label to launch the login flow. The default is "Login".
  • mpp-user-login.logoutButtonLabel: The label for the menu item that launches the logout flow. The default is "Log Out".