Customize HTML for Progress Indicator

Follow

Customize HTML Option

The HTML of the Campaign Progress Indicator templates can be edited, providing admins with knowledge of HTML and CSS more control over the look and feel of the progress indicator. The Customize HTML option enables admins to make general style changes such as reordering tokens, changing labels, removing the image option, adding addition images or content, etc. The iModules Design team and very knowledgeable clients can add custom styles and/or classes to the individual elements of the progress indicator, or to the overall design wrapper.

Before the Customize HTML option was added, the progress indicator could only link to the giving form. This option provides the ability to add a different link to the template.  The ability to customize the button link in the template also enables admins to use a custom link with appeal codes and/or pre-populated gift amounts added to the URL. If the progress indicator is not already connected to a specific designation, the custom designation IDs can also be appended to the URL.

The Customize HTML option provides:

  • Text area display of progress indicator markup - no WYSIWYG or content editor

  • Listing of available tokens that can be used in templates

    NOTE: iModules Design team does not recommend inline styles, as they can cause difficulties in their unintended ripple effects on the overall site design and redesigns.

Template changes are saved to template list for that Progress Indicator instance only

When an admin makes changes to the template, then saves the changes, a new "Custom Template" will be added to the template list for that progress indicator instance only. Admins can then select the template for additional / future editing of that indicator instance.

  • All changes are reflected dynamically on the page once the three step progress indicator wizard is completed.
  • Changes in tokens are reflected dynamically in step 2, but this is not meant to be a true preview of the progress indicator - whether customized or not.
  • This custom template is not available for use with other progress indicator instances - it is not available for sharing or use with other indicators.

Tokens Used in the Progress Indicator

[TitleText] - Text of the title of the goal (or progress indicator widget).

[Description] - Description of the campaign / goal being measured.

[LinkText] - Text of the link that is used to donate.

[LinkURL] - URL of the link that is used to donate.

[GraphicURL] - URL of the link associated with the image being used.

[Goal] – Donation goal, whether monetary or number of donors. (For monetary amount, it will add the $ and commas. For donor amount, nothing is added.)

[AmountRaised] - Dollar amount raised to date toward a monetary goal.

[AmountRaisedLabel] - Text that is displayed for the amount of money raised to date.

[ProgressPercentage] - The visual display area in the bar graphic of the percentage toward goal.

[GoalPercentage] - The numeric display within the bar graphic of the percentage toward goal.

[SimpleTimeRemaining] - Time remaining to achieve the goal displayed in days, which starts an hourly countdown at 72 hours.

[TimeRemaining] - Time remaining to achieve the goal displayed in weeks and days, staying at a count of days until 1 day then converts to hours then minutes.

[DonationCount] - Number of donations made to date.

[DonorCount] - Number of unique donors toward the goal to date.

[DonorCountLabel] - Text that is displayed for the number of unique donors to date.

[DonationTotal] - Total donation amount to date.

[CurrentTotalLabel] - Text that is displayed for the current progress toward the goal, whether monetary or number of donors.

[CurrentTotal] - Current progress toward the goal, whether monetary or number of donors.

 

Have more questions? Submit a request