Progress meter component

Visualise the progress of a campaign with the progress meter component. The component can be used to highlight the progress of an important campaign and to encourage potential contributors to participate. Keep the campaign status up to date by manually updating the numerical values, such as the number of donations or the amount raised.

The progress meter component can be used to visualise the progress of a campaign. It can be used in the following content types: Hub, Article and News. Use of the component is restricted to specific editors in the donor engagement team. 

The image below shows an example of what the component looks like.

Screen capture of the progress meter component
An example progress meter

Adding a new progress meter component

When adding a new progress meter component, you can edit the following fields:

  • Component title: choose a title for the progress meter.
  • CTA button: create an optional call-to-action (CTA) button with editable link text and URL.
  • Donation theme: choose the component’s theme from the university brand colours or school brand colours.
  • Progress meter instance: either create a new instance or select one from previously created progress meter instances. A progress meter instance defines the values displayed on the meter.

The image below shows the basic editable fields of the component.

Screen capture of the progress meter component editing form.
Editing form of the progress meter component

Setting the values of the meter

The details of the meter, such as the current value, maximum value, value unit and milestones, are defined in the progress meter instance. You can either select an existing instance or create a new one when adding the component.

When adding a new progress meter instance, you can set the following:

  • Internal name for the instance.
  • The current value, which can be edited based on the progress of the campaign.
  • Value unit.
  • Unit description that will be displayed below the current value.
  • Maximum value.
  • 1-3 milestones that can include a milestone text in additional to the numerical value.

Once a progress meter instance has been created, it can be reused when adding progress meters to other pages. This makes it easier to update the progress of a specific campaign on multiple progress meters at once, if you want to highlight the same campaign on different pages. 

Screen capture of progress meter instance editing form
Editing form of a new progress meter instance

More Drupal instructions

Components: how to create content for

Get to know the components for creating versatility and visuality when delivering your content.

This service is provided by:

Communications Services

Did you find what you were looking for? If not, please contact us.
  • Published:
  • Updated: