Customize HTML Option
You can edit the HTML of the Campaign Progress Indicator templates, 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 additional images or content, etc. The Encompass Design team and customers can add custom styles and/or classes to the progress indicator's elements or the overall design wrapper.
Before you added the Customize HTML option, the progress indicator could only link to the giving form. This option provides the ability to add a different link to the template. The template's ability to customize the button link also enables admins to use a custom link with appeal codes and/or pre-populated gift amounts added to the URL. If you have not connected the progress indicator to a specific designation, you can append the custom designation IDs 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 you can use in templates
NOTE: Encompass 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 get saved to the template list for that Progress Indicator instance only.
When an admin makes changes to the template, then saves the changes, a new "Custom Template" gets 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 completes.
- Changes in tokens reflect 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] - Use the Text of the link to donate.
[LinkURL] - Use the URL of the link 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. nothing gets added for For donor amount)
[AmountRaised] - Dollar amount raised to date toward a monetary goal.
[AmountRaisedLabel] - Text that gets displayed for the amount of money raised to date.
[ProgressPercentage] - The visual display area in the bar graph of the percentage toward the goal.
[GoalPercentage] - The numeric display within the bar graph of the percentage toward the 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 one 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 gets displayed for the number of unique donors to date.
[DonationTotal] - Total donation amount to date.
[CurrentTotalLabel] - Text that gets 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.