What would you like to know more about?

Show Page Sections

Interactive Widgets

This section describes how to insert our custom interactive widgets into a Heretto portal page. Interactive widgets (also called the widget configurator) are used in MinistryPlatform content, but could be used with any product with advanced planning and development assistance.

Note: As of 5/21/25, this functionality has been replaced by the Widget Configurator widget, available to customers through their Widget Library. We no longer use the interactive Widget Configurator in the Help Center.

Interactive widgets are based on existing json code provided by our developers. Administrators, website builders, use the widget configurator's to build code useful for inserting into their website. For more information about how customers use them, search MinistryPlatform content for "widget" or "widget configurator".

1There are three options of inserting a widget:

  • "All" Widget - this lists all widgets into the drop-down selector and loads the first one by default.

  • Default Widget - this lists all widgets into the drop-down selector and loads the widget based on the index that is set on the topic's section.
  • Single Widget - this does not show a drop-down selector, it loads the widget based on the index that is set on the topic's section.
    Tip: Since we are utilizing a DITA section to insert the widgets, you can still add any DITA element inside that section. These elements will appear on top of the widget.

    To insert a widget, add a section with an outputclass of acst-widget. To make it a Default Widget, just add another outputclass (separated by space) default-x where x is the index. To make it a Single Widget, use single-x.

    Note: Widget index starts from 0.
    Note: Widgets loaded from the JSON file are being sorted alphabetically in the code.
    Tip: Yes, you can insert multiple widget sections in one topic. Just like this one!

Example Widgets

This concept provides an overview of various example widgets, including the "All" Widget, Default Widget, and Single Widget, along with their respective DITA code configurations.

"All" Widget

DITA Code: <section outputclass="acst-widget"></section>

Default Widget

DITA Code: <section outputclass="acst-widget default-3"></section>

Single Widget

DITA Code: <section outputclass="acst-widget single-5"></section>

Developer Updates to the Widget Configurator

This task outlines the steps for updating the widget configurator with a new JSON file URL to resolve CORS issues and ensure the Help Center widget displays updated fields.

  • A developer on the MinistryPlatform team must update the JSON file and provide you with a new URL to that file.
When Heretto developed the widget configurator, they ran into a problem accessing the MinistryPlatform JSON file, due to some CORS issues (read more here). Changes are required with regard to where the JSON file is hosted to allow Heretto's domain to do a "fetch" to the ACST domain. As a workaround, Heretto uploaded our JSON file to jsonbin, which is publicly accessible."Until our development team re-locates the JSON file to a shared CDN, follow the steps below to update MinistryPlatform interactive widgets.
Tip: For more information and historical conversations, see JIRA ticket BOO-1580. See also:
Figure 1. Conversation 1 2023
Figure 2. Conversation 2 2024
  1. Obtain the URL for the new JSON file from the MP developer.
  2. Contact the Content Lead to coordinate scheduling with the Heretto portal team to update the fields. Heretto will need the URL before they can do the work.
Once jsonbin is updated, the new fields will display in the Help Center widget configurator.
1 This content is copied from Jethro's dev portal, located at https://dev7.portal.heretto.com/en/realm/how-to/acst-interactive-widgets#ariaid-title1.