API Status

Currently down.

Widgets

Widgets is an open source project consisting of pre-built JavaScript components that integrate with everydayhero’s API. These include search components, components for showing leaderboards, fundraising totals, fitness data and more.

Each component is responsive and can be customised via simple configuration options and CSS.

Example Code
Sample code ready to copy/paste for each component will display in this column.

Get Started

Step 1: Include the dependencies on your page once, (preferably) right before the closing </head> tag.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//d1ig6folwd6a9s.cloudfront.net/widgets-3.1.2.css" rel="stylesheet">
<script src="//d1ig6folwd6a9s.cloudfront.net/widgets-3.1.2.js"></script>

Step 2: Place the code for a widget where you would like it to display on your page.

<div id="FundsRaisedExample"></div>
<script>
  edh.widgets.renderWidget('FundsRaisedExample', 'FundsRaised', {
    campaignUids: ['us-22','us-19']
  });
</script>

Reference the following dependencies once, right before the close </head> tag, on each page you plan to use widgets:

With the dependencies added to your document see below for individual snippets that can be used to embed each widget. Each widget includes its own set of options allowing you to tailor it to your needs.

Got more questions? See the FAQ section.

Widget Types

Inline Widgets

Inline widgets are rendered into a target html dom element by using renderWidget:

Display a widget inline with the rest of your page content.

edh.widgets.renderWidget(element, name, options)

Open widget inside a modal when element is clicked/tapped.

edh.widgets.initModal(element, name, options)

Modal widgets cover the entire page while they are visible. There are two methods of triggering modal widgets, initModal will show the modal widget when the target element is clicked and showModal will show the modal widget immediately:

initModal

Open widget inside a modal on page load.

edh.widgets.showModal(name, options)

showModal

Search

AggregateSearch

The aggregate search modal widget allows you to search for campaigns, charities and supporters.

Demo

<button id="AggregateSearchExample">
  Search for a supporter, charity or event
</button>
<script>
  edh.widgets.initModal('AggregateSearchExample', 'AggregateSearch', {
    country: 'uk'
  });
</script>

Options

Default i18n translation object:

{
  title: 'Search',
  inputLabel: 'Search for a supporter, charity or event',
  campaignAction: 'Get Started',
  charityAction: 'Visit Charity',
  supporterAction: 'Support',
  emptyLabel: "We couldn't find any matching supporters, charities or events.",
  noMore: 'No more results',
  loadMore: 'Show more',
  loadingMore: 'Searching'
}

searchTerm (string)
Initial search term value.

country (string) Required
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’.

i18n (object)
Object containing localised text.

minimumScore (object)
Set the “fuzziness” of the search engine. A lower number will return more results. Default is set to: { all: 0.15, other: 0.15 },

searchType (string)
Optional string used to constrain search results to a given type. Set to either ‘campaigns’, ‘charities’, ‘pages’, or ‘all’. Default is set to ‘all’.

charityUids (array)
Optional array used to filter campaign results by given charity uids.

charityUuids (array)
Optional array used to filter campaign results by given charity uuids. Can be used as an alternative to using the regular charityUids parameter.

onSelect (function)
Optional function called on selecting a result. Takes a single argument that returns a full API response object for the selected result.

CharitySearch

The button element acts as a trigger to open the CharitySearch widget.

<button id="CharitySearchExample">Find a Charity</button>
<script>
  edh.widgets.initModal('CharitySearchExample', 'CharitySearch', {
    country: 'uk'
  });
</script>

The charity search modal widget allows you to search for a charity by name to donate, fundraise, or perform a custom action. By default, it searches for all charities in a given country, but can also be restricted to charities part of a given campaign.

Demo

Options

Default i18n translation object:

{
  title: 'Search for a Charity',
  visitAction: 'Visit Charity',
  donateAction: 'Give to this Charity',
  fundraiseAction: 'Fundraise for this Charity',
  selectAction: 'Select',
  emptyLabel: "We couldn't find any matching Charities."
}

action (string)
Action to perform on charity select, either ‘visit’ (default), ‘donate’, ‘fundraise’, or ‘custom’. Note: ‘visit’ and ‘donate’ actions are currently not supported for country ‘us’.

onSelect (function)
Function called on selecting a result. action must be set to 'custom'.

resizeCallback (function)
Function called when search results change. Useful for running code based on how many results are returned.

campaignUid (string)
Campaign uid to filter charity results.

campaignSlug (string)
Campaign slug for a given campaign.

country (string)
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’.

promotedCharityUids (array)
Charity uids for charities to show by default for empty query.

i18n (object)
Object containing localised text.

PageSearch

<a id="PageSearchExample">Support a friend</a>
<script>
  edh.widgets.initModal('PageSearchExample', 'PageSearch', {
    country: 'uk'
  });
</script>

The supporter page search modal widget allows you to search for a supporter page by name to visit or perform a custom action. By default, it searches for all pages in a given country, but can also be restricted to pages associated with a given campaign or charity.

Demo

Options

Default i18n translation object:

{
  title: 'Search for a Supporter Page',
  selectAction: 'Support',
  emptyLabel: "We couldn't find any matching Supporter Pages."
}

action (string)
Action to perform on charity select, either ‘visit’ (default) or ‘custom’.

onSelect (function)
Function called on selecting a result. action must be set to 'custom'.

resizeCallback (function)
Function called when search results change. Useful for running code based on how many results are returned.

campaignUid (string)
Campaign uid to filter page results.

charityUid (string)
Charity uid to filter page results.

groupValues (array)
Group values to filter page results.

country (string)
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’.

pageType (string)
Type of page either ‘user’, ‘team’ or ‘all’ (default).

i18n (object)
Containing localised text.

Totals

Funds Raised

<div id="FundsRaisedExample"></div>
<script>
  edh.widgets.renderWidget('FundsRaisedExample', 'FundsRaised', {
    campaignUids: ['us-22','us-19']
  });
</script>

Displays the total funds raised for specified campaigns, pages or charities as a dollar amount. Either a single or multiple campaign/page/charity ids can be provided as parameters to scope this widget.

Demo

Options

Default i18n translation object:

{
  title: 'Raised to Date',
  symbol: '$'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

groupValues (array)
Group values to filter results by multiple groups.

pageId (string)
Page id to filter results by page.

pageId (array)
Page ids to filter results by multiple pages.

charityUid (string)
Charity uid to filter results by charity.

charityUids (array)
Charity uids to filter results by multiple charities.

groupValue (string)
Group value to filter results by a group.

groupValues (array)
Group values to filter results by multiple groups.

startAt (string)
YYYY-MM-DD date string to get results on or after this date.

endAt (string)
YYYY-MM-DD date string to get results on or before this date.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

offset (number)
Set to 0 by default.

onLoad (function)
Function to call when data loaded. Passes endpoint response data as the first parameter.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

format (string)
Set to '0.00 a' by default. More format strings.

i18n (object)
Contains localised text.

Total Supporters

<div id="TotalSupportersExample"></div>
<script>
  edh.widgets.renderWidget('TotalSupportersExample', 'TotalSupporters', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total number of fundraisers (that have an everydayhero page) for specified campaigns. Either a single or multiple campaign uids can be provided to scope this widget.

Demo

Options

Default i18n translation object:

{
  title: 'Supporters'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

charityUid (string)
Charity uid to filter results by charity.

charityUids (array)
Charity uids to filter results by multiple charities.

groupValue (string)
Group value to filter results by a group.

groupValues (array)
Group values to filter results by multiple groups.

type (string)
Optional string to filter results by page type. Options are team, individual, or all. Set to all by default.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

format (string) Set to '0,0' by default. More format strings.

i18n (object) Contains localised text.

Total Donations

<div id="TotalDonationsExample"></div>
<script>
  edh.widgets.renderWidget('TotalDonationsExample', 'TotalDonations', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total number of donations made toward a given campaign. Either a single or multiple campaign uids can be provided to scope this widget.

Demo

Options

Default translation text

{
  title: 'Donations'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

charityUid (string)
Charity uid to filter results by charity.

charityUids (array)
Charity uids to filter results by multiple charities.

startAt (string)
YYYY-MM-DD date string to get results on or after this date.

endAt (string)
YYYY-MM-DD date string to get results on or before this date.

offset (number)
Added to the total number of donations.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string).
Accepts a CSS color value. Not set by default.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

format (string)
Set to '0,0' by default. More format strings.

i18n (object)
Contains localised text.

Total Charities

<div id="TotalCharitiesExample"></div>
<script>
  edh.widgets.renderWidget('TotalCharitiesExample', 'TotalCharities', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total number of charities associated with specified campaigns. Either a single or multiple campaign uids can be provided to scope this widget.

Demo

Options

Default i18n translation object:

{
  title: 'Charities'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

format (string).
Set to '0,0 a' by default. More format strings.

i18n (object)
Contains localised text.

Campaign Goal

  <div id="GoalExample"></div>
  <script>
    edh.widgets.renderWidget('GoalExample', 'Goal', {
      goal: 500000,
      i18n: {
        title: '2015 Goal'
      }
    });
  </script>

Set and display a campaign goal. While this component can be configured to display any type of goal it renders as a dollar amount by default.

Demo

Options

Default i18n translation object:

{
  title: 'Goal',
  symbol: '$',
  suffix: ''
}

goal (number) Required
Set a goal, rendered as a dollar value by default.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

format (string)
Set to '0[.]00 a' by default. More format strings.

handleCents (boolean)
Set to true by default. Determines whether the supplied goal is divided by 100 (to display as dollars).

i18n (object)
Contains localised text.

Goal Progress

Display the progress towards a fund raising goal for charities or campaigns.

Demo

<div id="EntityGoalProgressExample"></div>
<script>
  edh.widgets.renderWidget('EntityGoalProgressExample', 'EntityGoalProgress', {
    campaignUid: 'us-22',
    goal: 15000000
  });
</script>

Options

Default i18n translation object:

{
  symbol: '$',
  goal_text: '**{total}** raised of **{goal}** goal. **{remainder}** to go!',
  no_goal_text: '**{total}** raised'
}

goal (number) Required
Set a goal in cents. Renders as a dollar value by default.

offset (number)
Add to the goal in cents.

campaignUid (string or array)
Campaign uid or uids to filter results by campaigns.

charityUid (string or array)
Charity uid or uids to filter results by charities.

groupValue (string)
Group value to filter results by a group.

groupValues (array)
Group values to filter results by multiple groups.

startAt (string)
YYYY-MM-DD date string to get results on or after this date.

endAt (string)
YYYY-MM-DD date string to get results on or before this date.

format (string)
Set to '0[.]00 a' by default. More format strings.

onLoad (function)
Function to call when data loaded. Passes endpoint resonse data as the first parameter.

Total Distance

<div id="TotalDistanceExample"></div>
<script>
  edh.widgets.renderWidget('TotalDistanceExample', 'TotalDistance', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total distance recorded by fundraisers (using MapMyFitness) for a single specified campaign in either kilometers or miles.

Either a single or multiple campaign uids can be provided to scope this widget.

Demo

Options

Default i18n translation object:

{
  title: 'Miles',
  emptyLabel: 'No data to display.'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

unit (string)
Can be set to either 'km' or 'miles'. Converts input to whichever is defined. Set to 'miles' by default.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

backgroundColor (string) Accepts a CSS color value. Not set by default.

textColor (string) Accepts a CSS color value. Not set by default.

format (string). Set to '0,0[.]0[0]' by default. More format strings.

i18n (object) Contains localised text.

Total Hours

<div id="TotalHoursExample"></div>
<script>
  edh.widgets.renderWidget('TotalHoursExample', 'TotalHours', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total time recorded by fundraisers (using MapMyFitness) for a single specified campaign in hours.

Either a single or multiple campaign uids can be provided to scope this widget.

Demo

Options

Default i18n translation object:

{
  title: 'Hours',
  emptyLabel: 'No data to display.'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

format (string)
Set to '0,0[.]0[0]' by default. More format strings.

i18n (object)
Contains localised text.

Total Calories

<div id="TotalCaloriesExample"></div>
<script>
  edh.widgets.renderWidget('TotalCaloriesExample', 'TotalCalories', {
    campaignUids: ['us-0','us-1']
  });
</script>

Displays the total calories recorded by fundraisers (using MapMyFitness) for a single specified campaign or multiple campaigns.

Demo

Options

Default i18n translation object:

{
  title: 'Calories',
  emptyLabel: 'No data to display.'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

renderIcon (string or boolean)
Set to true by default. Pass in a valid FontAwesome icon name (without the fa prefix) to override the default. Set to false to render no icon.

backgroundColor (string) Accepts a CSS color value. Not set by default.

textColor (string) Accepts a CSS color value. Not set by default.

format (string). Set to '0,0' by default. More format strings.

i18n (object) Contains localised text.

Charities

Displays promoted charities that are passed in as a list of tabs and charity ids.

Demo

<div id="CharitiesExample"></div>
<script>
  edh.widgets.renderWidget('CharitiesExample', 'PromoCharities', {
    action: 'custom',
    onSelect: function(charity) {
      alert("You clicked " + charity.name);
    },
    tabs: [
      {
        category: 'Helping People',
        charityUids: ['au-3395', 'au-24', 'au-494']
      },
      {
        category: 'Helping Animals',
        charityUids: ['au-522', 'au-1661', 'au-914']
      }
    ]
  });
</script>

Options

Default i18n translation object:

{
  heading: 'Promoted Charities',
  subheading: 'Choose a tab below to view promoted charities within each category.',
  donateAction: 'Give Now',
  fundraiseAction: 'Fundraise',
  customAction: 'Select'
}

tabs (array) Required
Array of objects. Each object requires a category and a charityUids array.

showCharityTitle (boolean)
Set to false by default. Shows the name of each charity.

action (string)
Defines action to perform on charity select. Must be specified as either 'donate', 'fundraise' or 'custom'. Note: ‘donate’ action is currently not supported for country ‘us’.

onSelect (function)
Called on selecting a result when action set to 'custom'.

i18n (object)
Contains localised text.

Leaderboards

Leaderboard

Displays an individuals leaderboard sorted by funds raised (highest first) for a campaign or charity.

Demo

<div id="LeaderboardExample"></div>
<script>
  edh.widgets.renderWidget('LeaderboardExample', 'Leaderboard', {
    campaignUids: ['us-22', 'us-19']
  });
</script>

Options

Default i18n translation object:

{
  symbol: '$',
  heading: 'Top Individuals',
  emptyText: 'There are no individual supporters for this campaign yet. Be the first and register now!',
  emptyButtonText: 'Register'
}

campaignUid (string)
Define a campaign uid to filter results by campaign.

campaignUids (array)
Define multiple campaign uids to filter results by campaigns.

campaignSlug (string)
Campaign slug to filter results by campaign. Requires country.

charityUid (string)
Charity uid to filter results by charity. If used with campaignUid or campaignUids, multiple charity uids can be passed as a comma separated list. This will return pages for these charities within the specified campaign(s).

charitySlug (string)
Charity slug to filter results by charity. Requires country.

groupValue (string)
Group value to filter results by a group.

groupValues (array)
Group values to filter results by multiple groups.

country (string)
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’. Required by campaignSlug and charitySlug.

limit (number)
Set to 24 by default. Determines how many results are returned in total.

pageSize (number)
Set to 12 by default. Determines how many results to show per page.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

childWidth (number)
Set to 250 by default. Sets the minimum width for leaderboard items to display.

renderImage (boolean)
Set to true by default. Determines whether a profile image is rendered for each leaderboard item.

showCharity (boolean)
Set to false by default. Determines whether the charity name is rendered for each leaderboard item.

currencyFormat (string)
Set to '0[.]00 a' by default. More format strings.

onHasContent (function)
Callback function.

i18n (object)
Containing localised text.

Team Leaderboard

Displays a team leaderboard sorted by funds raised (highest first) for a campaign or charity.

Demo

<div id="TeamLeaderboardExample"></div>
<script>
  edh.widgets.renderWidget('TeamLeaderboardExample', 'TeamLeaderboard', {
    campaignUid: 'us-0'
  });
</script>

Options

Default i18n translation object:

{
  raisedTitle: 'Raised',
  membersTitle: 'Members',
  symbol: '$',
  heading: 'Top Teams',
  emptyText: 'There are no teams for this campaign yet. Be the first and create one now!',
  emptyButtonText: 'Start a team'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignSlug (string) Campaign slug to filter results by campaign. Requires country.

charityUid (string)
Charity uid to filter results by charity. If used with campaignUid or campaignUids, multiple charity uids can be passed as a comma separated list. This will return pages for these charities within the specified campaign(s).

charitySlug (string)
Charity slug to filter results by charity. Requires country.

country (string)
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’. Required by campaignSlug and charitySlug.

limit (number)
Set to 24 by default. Determines how many results are returned in total.

pageSize (number)
Set to 12 by default. Determines how many results to show per page.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

childWidth (number)
Set to 250 by default. Sets the minimum width for leaderboard items to display.

altTemplate (boolean)
Set to false by default. Renders an alternate template set when set to true.

renderImage (boolean)
Set to true by default. Determines whether a profile image is rendered for each leaderboard item.

currencyFormat (string)
Set to '0[.]00 a' by default. More format strings.

onHasContent (function)
Callback function.

i18n (object)
Contains localised text.

Fitness Leaderboard

Displays a leaderboard sorted by distance, recorded using MapMyFitness, for a campaign or charity. Ordered by highest first. This leaderboard also displays, and can be sorted by, funds raised. Can be set to show leaderboards for teams or individuals.

Demo

<div id="FitnessLeaderboardExample"></div>
<script>
  edh.widgets.renderWidget('FitnessLeaderboardExample', 'FitnessLeaderboard', {
    campaignUid: 'us-0'
  });
</script>

Options

Default i18n translation object:

{
  raisedTitle: 'Raised',
  distanceTitle: 'Distance',
  symbol: '$',
  heading: 'Top Individuals',
  kmSuffix: 'km',
  milesSuffix: 'mi'
}

campaignUid (string)
Campaign uid to filter results by campaign.

campaignSlug (string)
Campaign slug to filter results by campaign. Requires country.

charityUid (string)
Charity uid to filter results by charity. If used with campaignUid, multiple charity uids can be passed as a comma separated list. This will return pages for these charities within the specified campaign.

charitySlug (string)
Charity slug to filter results by charity. Requires country.

country (string)
Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’. Required by campaignSlug and charitySlug.

type (string)
Set a type of either 'team' or 'individual'. Set to 'individual' by default.

limit (number)
Set to 100 by default. Determines how many results should be fetched via the everdayhero leaderboards API endpoint.

pageSize (number)
Set to 5 by default. Determines how many results to display on the leaderboard at once.

backgroundColor (string)
Not set by default.

textColor (string)
Not set by default.

currencyFormat (string)
Set to 0,0[.]00 a by default. More format strings.

distanceFormat (string)
Set to 0,0[.]00 by default. More format strings.

i18n (object)
Contains localised text.

Supporters

Supporters

Displays a set of supporter cards (fundraising page summary with donate call to action) for a charity or campaign.

Demo

<div id="SupportersExample"></div>
<script>
  edh.widgets.renderWidget('SupportersExample', 'Supporters', {
    campaignUid: 'us-19'
  });
</script>

Options

Default i18n translation object:

{
  emptyLabel: 'No supporters to display.'
}

campaignUid (string) Campaign uid to filter results by campaign.

campaignUids (array)
Campaign uids to filter results by multiple campaigns.

campaignSlug (string) Campaign slug to filter results by campaign. Requires country.

charityUid (string) Charity uid to filter results by charity. If used with campaignUid, multiple charity uids can be passed as a comma separated list. This will return pages for these charities within the specified campaign.

charitySlug (string) Charity slug to filter results by charity. Requires country.

country (string) Country code of region, either ‘au’, ‘ie’, ‘nz’, ‘uk’ or ‘us’. Required by campaignSlug and charitySlug.

limit (number) Number of supporter cards to show. Default is 6.

i18n (object) Contains localised text.

Recent Fundraisers

Displays a set of fundraiser profile images (that have a page) for a single specified campaign.

Demo

<div id="RecentFundraisersExample"></div>
<script>
  edh.widgets.renderWidget('RecentFundraisersExample', 'RecentFundraisers', {
    campaignUid: 'us-0'
  });
</script>

Options

Default i18n translation object:

{
  heading: 'Fundraisers',
  emptyLabel: 'No fundraisers to display.'
}

campaignUid (string or array)
Campaign uid (or uids) to filter results by campaign.

pageSize (number)
Set to 6 by default. Determines how many results are returned.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string) Accepts a CSS color value. Not set by default.

i18n (object)
Contains localised text.

Maps

USA Map

Displays an SVG map. Each plotted point represents a supporter page.

Demo

<div id="MapExample"></div>
<script>
  edh.widgets.renderWidget('MapExample', 'Map', {
    campaignUid: 'us-0',
    region: 'US'
  });
</script>

Options

Default i18n translation object:

{
  heading: 'Program Reach',
  legend: 'Supporters'
}

campaignUid (string) Required
Campaign uid to filter results by campaign.

region (string)
Set the region/country to display using a region code, e.g. 'US'.

limit (string)
Set to '100' by default. Determines how many results are returned. Note: Returns geo-location data from returned user generated pages. Some pages may not have this data available.

color (string)
Set to '#525252' by default.

i18n (object)
Contains localised text.

Forms

Address Lookup

Displays a form input field and country selector, which allows users to lookup their address by fuzzy matching through the Google Places API, or via United Kingdom postcode through the PostCode Anywhere API. Once they find their address, it is broken down into parts for editing and database accuracy.

Demo

<div id="AddressLookupExample"></div>
<script>
  edh.widgets.renderWidget('AddressLookupExample', 'AddressLookup', {
    country: 'GB'
  });
</script>

Options

Pre-fill address object structure:

{
  street_address: '',
  extended_address: '',
  locality: '',
  postal_code: '',
  region: '',
  country_name: '',
  paf_validated: false
}

Default i18n translation object:

{
  inputLabel: 'Address Lookup',
  inputLabelGB: 'Postcode Lookup',
  manualEntryButton: 'Enter Manually',
  resetButton: 'Reset Address',
  error:"Sorry, we couldn't find that address"
}

required (boolean)
Sets the address field as being required. Defaults to ‘false’.

prefix (string)
Add a unique identifier to the input elements, for use when multiple AddressLookup widgets appear on the same page / post to the same form. Defaults to “.

spacing (string)
Specify the spacing around input. Valid options are: "compact”, “loose”, and “tight”. Default is “loose”.

country (string)
Two-digit capitalized country ISO code (AU, GB, US, NZ, IE, etc). Default is ‘US’.

address (object)
Object containing a pre-existing address to display. If provided, lookup functionality is not available. Use when user address already provided or when page reloads on form validation. Default is null.

output (function)
Get user’s final selected address.

i18n (object)
Contains localised text.

Amount

Displays a radio group and input field, which allows users to choose from four predefined values, or input a custom value. Will default to the second predefined value on load, and when custom value is 0.

Demo

<div id="AmountExample"></div>
<script>
  edh.widgets.renderWidget('AmountExample', 'Amount', {
    name: 'target_value'
  });
</script>

Options

name (string)
Identify the radio group and input in a form. Default is 'Amount'.

amount (number)
Value of the initial selected preset or custom amount. Default is null.

amounts (array)
Array of exactly four predefined numbers (not strings). Default is [500, 700, 1500, 3000].

output (function)
Get selected amount.

currency (string)
Currency symbol. Default is '$'.

spacing (string)
Specify the spacing around the input. Valid options are: "compact", "loose", and "tight". Default is "loose".

Input

Displays an input field which can accept input masking, asynchronous validation, modal activation, layout modification, default values, and various input relevant properties.

Demo

<div id="InputExample"></div>
<script>
  edh.widgets.renderWidget('InputExample', 'Input', {
    i18n: {
      name: 'input_example',
      label: 'Example Input',
      hint: 'Enter some text',
      error: 'Please enter some text'
    }
  });
</script>

Options

Custom mask function used to modify user input as it’s entered.

function mask(input) {
 var maskedString = input; // masking logic here
 return maskedString;
}

Custom validate function. Is passed the current input string and a callback. Runs when an input field loses focus.

function validate(input, callback) {
 var boolean = !!input; // validation logic here
 return callback(boolean);
}

Custom output function allows you to catch input changes as they are made.

function output(input) {
  // act on changes within the input here
}

Custom modal function, executed when field gains focus.

function modal(object) {
  // you can animate the modal opening from object.element
  // you can use object.value for modal's initial value
  // you can set the new value of the input from object.callback(value)
}

Valid i18n translation object:

{
  name: 'input', //becomes the input's ID
  label: 'Input', //visible label for the input
  hint: 'What is this input for?', //visible hint when input is focused
  error: "Please don't leave this blank" //message to display if not valid
}

Default i18n translation object:

{
  name: 'input',
  label: 'Input'
}

readOnly (boolean)
Prevent users from altering the input by typing. Best used with a modal attached. Default is false.

disabled (boolean)
Prevent users from changing the input, and displays as disabled. Default is false.

autoFocus (boolean)
Determine if the input should gain focus as soon as it is loaded. Should only be true for one input on the page. Default is false.

autoSelect (boolean)
Determine if the input should gain focus and also have the value highlighted upon loading. Should only be true for one input on the page. Default is false.

autoComplete (boolean)
Determine if the input should use the browser’s autocomplete functionality. Default is false.

required (boolean)
Trigger optional validation methods and ensure the input isn’t left blank. Default is ‘false’.

mask (function)
Modify user input as it is entered. Default is ‘null’. Is passed the current input string.

validate (function)
Validate the user input when the field loses focus. Is passed the current input string and a callback to set valid state. Default is ‘null’.

output (function)
Catch input changes as they are made. Default is ‘null’. Is passed the current input string. Example:

modal (function)
Executed when field gains focus. Best used to open a modal or reveal additional UI for the field. Default is null. Is passed an object containing the input DOM element, the current input string, and a callback to alter the value.

type (string)
Defining the html input type. Default is 'text'.

icon (string)
Specify an icon to appear to the right. Valid strings are Font Awesome icon names (without the ‘fa-’ prefix). Default is null.

showIcon (boolean)
Allow disabling icons when set to ‘false’. Default is true.

width (string)
Specify the width of the field. Valid options are: "full", "wide", "half", and "narrow". Default is "full".

spacing (string)
Specify the vertical spacing beneath each input. Valid options are: “compact”, “loose”, and “tight”. Default is “loose”.

value (string)
Input’s initial value. Not set by default.

onEnter (function)
Callback function for onEnter event.

animateLabel (boolean)
Make label a large hint text when there is no value or input is blurred. Animates to a small label on focus. Defaults to false.

i18n (object) Required
Contains localised text.

SearchInput

Renders search style input and allow onSubmit callback which returns the value

Demo

<div id="SearchInput"></div>
<script>
  edh.widgets.renderWidget('SearchInput', 'SearchInput', {
    onSubmit: function(value) {
      edh.widgets.showModal('AggregateSearch', { searchTerm: value, country: 'uk' });
    }
  });
</script>

Options

autoFocus (boolean)
Determine if the input should gain focus as soon as it is loaded. Should only be true for one input on the page. Default is false.

autoSelect (boolean)
Determine if the input should gain focus and also have the value highlighted upon loading. Should only be true for one input on the page. Default is false.

onSubmit (function)
Callback which returns input value on enter or click search button.

width (string)
Specify the width of the field. Valid options are: "full", "wide", "half", and "narrow". Default is "full".

label (string)
Set to search by default.

Teams

Teams (Campaign)

Displays a set of teams for a single specified campaign.

Demo

<div id="TeamsExample"></div>
<script>
 edh.widgets.renderWidget('TeamsExample', 'Teams', {
   campaignUid: 'us-0'
  });
</script>

Options

Default i18n translation object:

{
  heading: 'Teams',
  emptyLabel: 'No teams to display.'
}

campaignUid ((string or array))
Campaign uid (or uids) to filter results by campaign.

pageSize (number)
Set to 12 by default. Determines how many results are returned.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

i18n (object)
Contains localised text.

Calls to Action

Call To Action Box

Displays a call to action box with links to the getting started and sign in page for the specified campaign. A registration URL must also be provided.

Demo

<div id="CallToActionBoxExample"></div>
<script>
  edh.widgets.renderWidget('CallToActionBoxExample', 'CallToActionBox', {
    campaignUid: 'us-0',
    registrationUrl: 'https://your-registration-url.com/'
  });
</script>

Options

Default i18n translation object:

{
  title: 'Get Involved',
  registerLabel: 'Register Now',
  getStartedLabel: 'Start Fundraising',
  signInLabel: 'Sign in'
}

campaignUid (string) Required
Campaign uid to automatically insert ‘sign in’ and ‘get started links’.

registrationUrl (string) Required
Pass a URL to your registration page.

backgroundColor (string)
Accepts a CSS color value. Not set by default.

textColor (string)
Accepts a CSS color value. Not set by default.

i18n (object)
Contains localised text.

Share Button

A share button that opens a pop-over when clicked and allows for sharing a URL. Includes the options for sharing a direct link or sharing via popular social networks.

Demo

<div id="ShareButtonExample"></div>
<script>
  edh.widgets.renderWidget('ShareButtonExample', 'ShareButton');
</script>

Options

Default i18n translation object:

{
  buttonLabel: 'Share this page',
  shareLinkLabel: 'Share a direct link',
  shareViaLabel: 'Share via'
}

buttons (array)
Determines which social network/sharing service buttons to show. Choices include 'facebook', 'twitter', 'googleplus' and 'pinterest'. Default is set to display all buttons.

shareUrl (string)
Sets the URL to share. Default is set to the current page URL.

shareTitle (string)
Sets the title to share for some services. Default is set to the value stored in the current page <title> tag.

shareImage (string)
Sets the image to share on Pinterest. Is not set by default.

renderIcon (boolean)
Set to true by default.

i18n (object)
Contains localised text.

Events

Campaign Goals

Displays a bar graph of the percentage of donations towards a goal for multiple campaigns.

Demo

<div id="CampaignGoalsExample"></div>
<script>
  edh.widgets.renderWidget('CampaignGoalsExample', 'CampaignGoals', { campaigns: [{
      uid: 'au-9674',
      name: 'Campaign 1',
      goal: 65000
    }, {
      uid: 'us-22',
      name: 'Campaign 2',
      goal: 2100
    }, {
      uid: 'us-24',
      name: 'Campaign 3',
      goal: 8000
    }]})
</script>

Options

campaigns (array) Required
Array of objects representing each campaign goal to display. Each object should contain the following:

uid (string) Campaign UID to fetch data from

name (string) Name to display below each campaign goal

goal (integer) Intended donations goal

Upcoming Events

Displays a list of upcoming events/campaigns.

Demo

<div id="UpcomingEventsExample"></div>
<script>
  edh.widgets.renderWidget('UpcomingEventsExample', 'UpcomingEvents', {
    charityUid: 'gb-1'
  });
</script>

Options

Default i18n translation object:

{
  emptyLabel: 'No upcoming events available.'
}

charityUid (string) Required
Charity uid to filter campaigns results.

excludeEvents (array) Array of events to exclude.

events (array) Array of events to feature. Only these events will be shown. These events must exist in the results returned from the API via campaignID(s) / charityID(s)

i18n (object)
Contains localised.

Countdown

Displays a countdown of days until the start of an event or campaign. Can be configured to show a call to action button that hides itself once the event has completed or is in the past.

Demo

<div id="CountDownExample"></div>
<script>
  edh.widgets.renderWidget('CountDownExample', 'CountDown', {
    date: "2017-04-24",
    linkUrl: 'https://everydayhero.com/us'
  });
</script>

Options

Default i18n translation object:

{
  link_text: 'Register',
  finished: "This event has now finished.",
  past_tense: {
    one: "day ago",
    other: "days ago"
  },
  future_tense: {
    one: "day to go",
    other: "days to go"
  }
}

date (string) Required
The date of your event specified as YYYY-MM-DD.

linkUrl (string)
URL to link to, e.g. a registration page. Defining this option will result in showing a call to action button.

i18n (object)
Contains localised text.

Misc. UI Elements

Tabs

Displays a set of tabs that transform to an accordion depending on browser window size/number of tabs.

Demo

<div id="TabsExample"></div>
<script>
  edh.widgets.renderWidget('TabsExample', 'Tabs', {
    children: [
      {
        label: 'Example Tab',
        content: '<p>Tab content goes here.</p><p>Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.</p>'
      },
      {
        label: 'Another Tab',
        content: '<p>Lorem <strong>ipsum dolor</strong> sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.</p>'
      },
      {
        label: 'Last Tab',
        content: '<p>An image:</p> <img src="http://placehold.it/200x100">'
      }
    ]
  });
</script>

Options

children (array) Required
Array of objects containing a label and content field to represent each tab, or array of react components.

collapse (string or boolean)
Set to 'auto' for automatic collapsing, true to force collapsing and false to disable collapsing. Set to 'auto' by default.

FAQ

How do I change the look and feel of the widget I want to use?

Widgets embedded on your page are just like any other HTML element and can be styled with CSS. This allows you to change everything from fonts and colours to the size and shape of specific elements within the widget.

Can I change the text labels on a widget?

Example of a widget with custom text labels:

edh.widgets.renderWidget('ShareButtonExample', 'ShareButton', {
  renderIcon: false,
  shareUrl: "http://everydayhero.com/us/",
  i18n: {
    buttonLabel: "Share now",
    shareLinkLabel: "Share a link"
  }
});

Each widget has an option called i18n. This option accepts a JavaScript object and allows you to override all text labels used within a widget. To change a label add the i18n object with just the key/value pairs you want replaced.

Do I have to place the dependencies right before the closing </body> tag?

Make sure the dependencies are loaded before individual widgets.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//d1ig6folwd6a9s.cloudfront.net/widgets-3.1.2.css" rel="stylesheet">
<script src="//d1ig6folwd6a9s.cloudfront.net/widgets-3.1.2.js"></script>
<div id="FundsRaisedExample"></div>
<script>
  edh.widgets.renderWidget('FundsRaisedExample', 'FundsRaised', {
    campaignUids: ['us-0','us-1']
  });
</script>

It is recommended that the dependency files be added to after the opening <body> tag so that you can use the widgets throughout your page (or pages). However, they can be added anywhere between the <body></body> tags of your page, though keep in mind that the dependencies must appear before any individual widget code.

I’m using WordPress (or another CMS) and the widget isn’t working. What’s going wrong?

Most content management systems, including WordPress, often strip or alter foreign code that has been added while editing content for numerous reasons. This interference will likely break the widget code and result in the widget not loading.

If you need to add widgets to your page it’s best to gain access and add the code directly to your page template or source code. If you’re not able to do that yourself we encourage you to contact the parties responsible for developing your website to assist.

Alternatively WordPress has numerous plugins created in order to help in these situations, allowing you to embed code without any interference. Some example plugins include Code Embed and WP Insert Code.

Contact Us

Got a question? Sure!

You can reach us at: api@everydayhero.com

Australia: 1300 798 768

New Zealand: 0800 22 43 76

United Kingdom: 0845 680 9720

United States: (213) 293 1133