Display widgets

Owned by Michael Kalnicki
Last updated: May 27, 2024 by Sam Louk
6 min read

Display widgets are “social proofs” such as progress bars that show the current level of donations or actions taken towards a goal.

What kind of widgets can I use?

There are three types of display widgets – Progress bars, Thermometers and Image Fills

How do I add them to my page?

To add a display widget to your page, go to the toolbar on the right. Under Display widgets, drag in the component into your page as you would with a text block or form block.

It will ask you the type you wish to insert – click the one you want and click Next. You will now see a screen in which you can amend how your widget works and looks. You have several sections to look at.

Main widget settings

  • Name – this is the name of the widget for your own internal reference

  • Type – this is not amendable and shows the widget type you chose at the previous step

  • Pages (dotted area) – this section will show your current page by default. But you have the option of adding in other pages too, which will add data from those additional pages into your widget. For example, you may want to amalgamate four different campaigns into one widget. More about this below

Preview and customize

This section allows you to customize how the widget looks.

Preview

You can see a preview of how your widget will look on the right. The preview updates as you make changes to its settings. The value of the counter in the preview is not related to the real value. Instead it shows an example of 50% of the goal (plus any start value) so you can see how it will look.

Templates

Some widgets come in different versions, which you change by selecting the template. Note that as soon as you start editing your widget’s look, the template will change to “Custom”. Moving off from this will lose any of your changes made so far unless you have saved your widget.

Settings

  • Metric – this determines what kind of data the widget will display. The metrics available depend on the page (or pages) that the widget gathers its data from. You can either show:

    • Participations which is the number of emails sent by an advocacy campaign (note: when you choose participations, you will also include duplications, e.g. if a supporter signed the same petition twice, it would count this as 2 participations),

    • Unique participants which is the unique number of supporters that have successfully taken part, or

    • Number of donations or Donation total. For “donations total” you also need to provide a currency (note: your currency display option appears after live donations have been processed in your account). At this time, the widget will display a total of all currencies and not convert them, ie. £20 and $50 will appear as £70 if your chosen currency is GBP. This will be amended in the future.

  • Start number – add a number here if you want the counter to not start at zero. For example, if you have collected 250 signatures offline, if you type in “250” here the counter will start at 250, essentially adding 250 to the total displayed

  • Goal – this is the goal of your campaign which will be reflected in the widget. If your goal is 1000 and you have 500 signups, then the widget will be half full

  • Display the current total? – if you untick this, the number will not be displayed, just the graphic

Styles

You can style the widget from the default if you wish. The styles available depend on the type of widget and template you have chosen.

  • Background – for progress bars, this is the background color inside the widget. For thermometers, it is the color inside the boder of the thermometer. For image fills it is the number bar’s background color

  • Fill – for progress bars and thermometers, this is the fill color of the bar

  • Count color – the total’s text color

  • Border color – for progress bars, and thermometers, this is the color of the bar’s border

  • Border width – progress bars only. The width in pixels of the border around the widget bar

  • Width – image fills only. This is the width of the widget in pixels or percent. Note that if you choose percent it refers to the width of the containing element. e.g. 100% will make the widget the full width of its container

  • Height – the height in pixels, or percent, of the thermometer or widget bar. Note that if you choose percent it refers to the height of the containing element. e.g. 100% will make the widget the full height of its container. If the container has no height, note that the widget will not either

  • Before and After image – some templates include images which you can set here

Copy

You can add descriptive text copy above and below the widget and include variables in the text that relate to the widget’s reported numbers.

  • Copy – Select whether you’d like to add copy above and / or below the graphical elements of the widget

  • Copy window – You can insert text into the WYSIWYG editor here using the text formatting tools

  • Insert Widget Data – There are also three dynamic buttons (in blue) available in the WYSIWYG editor menu that allow you to insert dynamic content into your widget copy.

 

 

 

 

 

 

Campaign Link

Link to an existing campaign in your account. You’ll need to highlight the text in the editor that you want to use as the link and the campaign link button will then activate. Clicking this button enables you to name your link, select the campaign you want to link to and specify which page in the target campaign you want supporters to land on. You can also specify the link colour.

Insert Static Link

Link to an external URL anywhere on the web or a static web page in your Engaging Networks account. You’ll need to highlight the text in the editor that you want to use as the link and the Insert Static Link button will then activate. Clicking this button enables you to name your link, specify the URL or the static page. You can also specify the link colour.

Insert Widget Data

Insert the numerical data from your widget into your text copy. You can include variables that will show the total participants, percentage of your target completed, the target number or the remaining number needed to reach your target goal. These variables will show up in the editor as placeholders, the live numbers will be replaced in a live campaign the supporter sees.

Embed code

If you wish to embed the widget elsewhere, for example your website, click “Get the embed code“. You have two options for how to embed the widget, either as an iframe or as javascript.

Which one you use depends on how you want the widget to respond to styling of the website it is embedded on. The iframe is isolated from the CSS of the page on which it is embedded, and also from manipulation by scripts on that page, so it should look the same wherever it is embedded. But if you want it to pick up styles, then script is better.

Here’s an example of an iframe embed:

Locales

Like with many components in page-builder, widgets are integrated with locales. If you use locales, it will try to match the locale of the page it sits on, so make sure that the right locales are set in the widget if you are using them.

For embedded widgets, the locale is set in the embed code.

Showing data from more than one page (same account)

By default, the widget will be set up to show counts from the page you create it on. However it is possible to totalise several pages together. To do this, go to the widget’s settings and click the pencil icon in the dotted area. Under the “current account” tab it will show all the available pages you can select.

Note that when it totals supporters from different pages, it will not de-duplicate. So if a supporter took action on two pages, they will be counted twice.

Showing data from more than one page (different accounts)

This is only relevant to clients with multiple subaccounts

If you are a client that has several subaccounts, then it is possible to select pages from different subaccounts here. To do this, go to the “Other accounts” tab. The pages from other subaccounts can be selected by their attribute, so other teams will have to use the correct attribute on the relevant page(s) first for them to be selectable.

The way attributes are compared between accounts is by matching the name of the attributes (case insensitive). So “bears” in account #1 will match to “Bears” in account #2 and “BEARS” in account #3.

Troubleshooting display widgets

If your widget is not showing when previewing your page, check that you have a public token set in your account.

Display widgets are automatically saved as re-usable, shared assets. When you duplicate a page that is using a display widget, the original display widget will come over to the new page.

If the number it displays looks incorrect, check that:

  • are you are looking at unique participations? Unique participations do not double-count duplicates

  • do you have a start value? This will add on to the widget total

  • check which page, or pages, the data is coming from – is it the right one?

  • note that widgets don’t work off live data – for efficiency, they work off aggregated data tables. Therefore deleting live data will not reduce the number in the widget