Engaging Networks predomininantly provide web applications to the charity sector for campaigning/fundraising purposes. Two of their products, E-Activist and Net Donor, create interfaces to capture supporter data, stored in a database accessible via an API. The web applications' purpose is to provide a WYSIWYG-style interface through which donation and campaigning forms can be generated by the charity, which their supporters can then use to support a cause.
The apps focus mainly on the creation of these forms and the storage of supporter data for the charities, they're less focussed on providing tools to increase social engagement of the campaigns themselves.
These plugins try to bridge that gap somewhat by providing Social Proof widgets, which can be used on any website, which show the campaigns in action.
These plugins are for use with jQuery and are used to access Engaging Network's API and generate stylable widgets for use on a charity's website.
3 plugins currently exist
A dynamic list of the supporters who have recently used any given campaigning form or forms. All data fields captured from a supporter are returned (unlike RollCall).
(Uses EN's EaDataCapture service.)
A "We have raised this much to rebuild the church roof" style thermometer to indicate the overall success of a campaign, relative to the campaign's goal. This can be used to indicate total donations or total registrations/engagements.
(Uses EN's EaEmailAOTarget or NetDonor services.)
Similar to 'Supporter list' shown above but with the option of fundraising donation amounts from the NetDonor system (e.g. Bob just gave £10). This plugin requires less processing than 'Supporter list' but doesn't include information about how recently an action was taken.
(Uses EN's two new services, RollCall and FundraisingRollCall, which appear to be intended for use by systems like the Recent Supporter List, but limited in the fields it returns.)
Coming soon...
WWF and Greenpeace both use these widgets on their ongoing campaigns.
All plugins require these options defining as a bear minimum and are essential to working with the Engaging Networks data API.
| Option | Default | Description |
|---|---|---|
| token | Mandatory. Your special API token provided by e-Activist. Enables access to the e-Activist data API. | |
| campaignId | Mandatory. A single campaign ID or list of campaign IDs for which data should be retrieved (and aggregated, if relevant). The campaign ID can be found in the URL for each campaign e.g http://e-activist.com/ea-action/action?ea.client.id=xx&ea.campaign.id=xxxxx |
| Option | Default | Description |
|---|---|---|
| count | 5 | The number of recent supporters you want listed. Supporters will be listed most recent first. |
| format | {forename} from {town}, {datetime} {ago} |
The exact formatting of the output of each row of information. This can include HTML. The {placeholders} are used to retrieve specific fields from e-Activist's API. One placeholder not related to e-Activist's fields is |
| agoFormat | datetime | The name of the field containing the date to be formatted into the relative “2 mins ago” time. For almost all situations this does not need to be changed. |
| agoText | ago | The literal word "ago" or its translation into another language, used to generate the relative time phrase "2 mins ago" |
| agoFormatLabelsSingular | ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'] | An array of labels for each of the key time periods used to output the relative time format. Singular versions of the nouns only. |
| agoFormatLabelsPlural | ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'] | An array of labels for each of the key time periods used to output the relative time format. Plural versions of the nouns only. |
| dataUrl | By default the plugin will pull data directly from e-Activist's API URL, but you may wish to have it pull from an alternate URL. The format of the data is expect to be exactly the same as e-Activist's output. |
<script src="jquery.eactivist-supporterlist.js"></script>
<script>
$(function(){
$('.supporterlist').eActivistSupporterlist({
token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx',
campaignId: 'xxxxx,xxxxx,xxxxx',
format: '<span class="name">{vorname}</span> de {land} <span class="time">{ago} {datetime}</span>',
agoText: 'Hace',
agoFormatLabelsSingular: ['ano', 'mes', 'semanas', 'dia', 'hora', 'minutos', 'segundo'],
agoFormatLabelsPlural: ['ano', 'mes', 'semanas', 'dia', 'hora', 'minutos', 'segundo'],
count:5
})
});
</script>
<div class="supporterlist">
<h3>People taking action</h3>
</div>In the somewhat implausible example above, the relative time format has been configured for Spanish (note {ago} goes before the {datetime}) but the fields being pulled from the data API are {vorname} and {land} and evidently coming from a German database.
It would output something like
<div class="supporterlist">
<h3>People taking action</h3>
<ul>
<li><span class="name">David</span> de England <span class="time">Hace 2 minutos</span></li>
<li><span class="name">Luke</span> de Tatooine <span class="time">Hace 10 minutos</span></li>
<li><span class="name">Darth</span> de Tatooine <span class="time">Hace 1 hora</span></li>
<li><span class="name">Leia</span> de Alderaan <span class="time">Hace 5 hora</span></li>
<li><span class="name">Han</span> de Corellia <span class="time">Hace 1 dia</span></li>
</ul>
</div>| Option | Default | Description |
|---|---|---|
| target | 0 | Engaging Networks have no knowledge of your campaign targets so to create a thermometer plotting progress towards that target requires you to manually provide the target number, using this option. If you have a campaign where your target number is 40,000, you’d specify target: 40000 (without commas to denote thousands). |
| initialValue | 0 | You may wish the thermometer's level to include data from outside the e-Activist system. initialValue allows you to specify a number which will be added to the count that comes from the e-Activist data API, prior to plotting the thermometer progress. If for example you have received 200 supporters via a street campaign, and 1000 supporters via e-Activist, you would specify initialValue: 200. A total of 1200 would display on thethermometer. |
| duration | 2000 | The duration of the animation which increases the thermometer's level to the point representing progress so far. If set to 0 no animation will occur. |
| dataUrl | By default the plugin will pull data directly from e-Activist's API URL, but you may wish to have it pull from an alternate URL. The format of the data is expected to be exactly the same as e-Activist's output. | |
| service | EaEmailAOTarget | Case Sensitive. Accepts 'EaEmailAOTarget' or 'NetDonor'. 'EaEmailAOTarget' is for use with e-activist campaigns. 'NetDonor' is for use with NetDonor fundraising campaigns. |
| currencySymbol | empty string | Only relevant for NetDonor fundraising campaigns. Prepends a character to the numeric values output by the plugin (t_target and t_current). £ is the HTML code for £. |
The contents of the element you choose with your jQuery selector should include the following classes. The types of elements you add these classes to is up to you, but obviously the markup must be conducive to the general concept of a thermometer which has a body and a "level" within that body.
| Class | Description |
|---|---|
| t_body | Mandatory. This element must wrap one with t_level applied. t_body is the main body of the thermometer - the part which "fills" with the progress bar. |
| t_level | Mandatory. The themometer's "level" indicator. An element which is expanded/contracted to indicate the progress of the campaign towards its target. |
| t_current | Any element with t_current applied to it will be populated with the value of the total current number of actions on the campaign (or totalled across multiple campaign IDs, if specified). |
| t_target | Any element with t_target will be populated with the value entered in the target plugin option. Useful for generating messages like "X people have signed up, help us get to Y". |
<script src="jquery.eactivist-thermometer.js"></script>
<script>
$(function(){
$('.thermometer').eActivistThermometer({
token:'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
campaignId:xxxxx,
target:50000
});
});
</script>
<div class="thermometer">
<div class="t_body">
<div class="t_level"></div><span class="t_current"></span>
</div>
<span class="t_current"></span>have signed up. Help us get to <span class="t_target"></span>
</div>| Option | Default | Description |
|---|---|---|
| dataUrl | By default the plugin will pull data directly from e-Activist's API URL, but you may wish to have it pull from an alternate URL. The format of the data is expected to be exactly the same as e-Activist's output. | |
| format | {firstName} from {country}{city} gave {currency}{amount} |
The exact formatting of the output of each row of information. This can include HTML. The {placeholders} are used to retrieve specific fields from e-Activist's API. |
| dataSet | 1 |
This is an option from the Engaging Networks API. dataSet=1 returns first name and country. dataSet=2 returns first name and city |
| count | 5 |
The number of results you want to see. |
| service | RollCall |
Case Sensitive. Accepts 'RollCall' or 'FundraisingRollCall'. RollCall is for use with an e-activist campaign. FundraisingRollCall is for use with a NetDonor campaign. |
| titleCaseFields | ['firstname', 'city', 'country'] |
Preformats the specified fields into Title Case (data from API isn't sanitised). Enter the lower-case titles of the API fields you would like to format. 'ford from GUILDford' would become 'Ford from Guildford'. Could also be done manually with CSS text-transform:capitalize. |
| currencySymbolReplacements | { 'GBP':'£', 'EUR': '€'} |
Only required for FundraisingRollCall. Converts the currency data as stored in the database (e.g. GBP) into an HTML encoded character for display on the page. |
<script src="jquery.eactivist-rollcall.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(function(){
$('#fundraising_rollcall').eActivistRollcall({
token:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx',
campaignId:'xxxxx,xxxxx,xxxxx',
count:3,
dataSet:2,
format:'<span class="name">{firstName}<\/span> from {country}{city} gave {currency}{amount} ',
service: 'FundraisingRollCall'
})
});
// ]]>
</script>
<div id="fundraising_rollcall">
<h3>Latest donations</h3>
</div>