Customizing thermometers and widgets

Thermometers and leaderboard widgets can customized to filter results, change sort order and update titles.

The raisin Website Builder offers a vast library of drag-and-drop content blocks to pick from and build your fully-customized fundraising website, including Widgets like thermometers, leaderboards and "Quick Give", that serve dynamic content and  real-time fundraising progress.

To further personalize the experience for site visitors, widgets can be customized to filter results, change sort order of the results and update widget titles, or embedded into external websites.

Scoreboard Widgets

Scoreboard widgets are available for three Groups: Donors, Teams and Fundraisers (i.e. Participants). 

Changing Titles

When dropped on a page, those widgets have default titles of: Top Donors, Top Teams and Top Fundraisers. However adding the attribute data-param-ttl="" to the <div> element will change the title.

So adding data-param-ttl="My New Title" will add a title of My New Title to the widget.

Change Sort Order

By default the scoreboard widgets display a list of "tops" for each of the group listed above. That default of Top, displays a list for each group ordered descending by the total amount of money; be it raised or donated.

There exists another type/ordering of "most recent" which displays a list for each group ordered descending by the date they joined the event or in the context of a team would be the date a team was created.

There exists yet another type/ordering of "total number of donations" (only available for the group Teams) which display a list of teams ordered descending by the total number of individual donations made to that team. This parameter will only work on the Team Scoreboard.

This setting can be customized by adding the attribute data-param-st= to the <div> element this will change the type/ordering for a group.

• data-param-st="1" = Tops (default)(does not need to be present on the <div>)
• data-param-st="2" = Total number of donations (can only be applied to Teams group)
• data-param-st="3" = Most recent

Filtering results and advanced customization

Widgets support advance customization through changes to properties using code, allowing you to do things like filter results for specific records, change the presentation (table or list views), and more.

To access these advanced properties, drag in a Code block from the Content panel of the CMS following these steps: 

• Log in to Admin and edit event website
• Once in CMS Admin, select a page to edit from the LHS menu
• Click on Content in the LHS menu and in the dropdown filter select All to show all snippets
• Scroll to the bottom of the snippets list and drag snippet <...> (Snippet 321) to the page editor
• Once snippet is placed on the page click on the gear icon to edit it
• Paste the widget code into the popup window
• Click Ok and "save" the page changes

Top Fundraisers

The Top Fundraising will default to displaying the specified number of participants ranked and in a list view. The view can be changed to a table.

Sample code

To add the widget, copy and paste the sample below into a code block:

<div id="topFundraisersAboveAmount" class="column full no-padding-side top-fundraisers-widget-placeholder" style="margin-top:15px; margin-bottom:15px;"></div>

<script>
/* Example of script block */
var docReady = function (fn) {
    var stateCheck = setInterval(function () {
        if (document.readyState !== "complete") return;
        clearInterval(stateCheck);
        try { fn() } catch (e) { }
    }, 1);
}

docReady(function () {

    if (window.raisin_dd.SiteType === "Desktop Admin") return;
    var container = document.getElementById('topFundraisersAboveAmount');
    container.innerHTML = '';
    var el = document.createElement('top-fundraisers');
    el.setAttribute('org-id', window.raisin_dd.OrganizationId);
    el.setAttribute('se', window.raisin_dd.SubEventPart);
    el.setAttribute('type', 'table');
    el.setAttribute('rows-number', 1000);
    el.setAttribute('min-amount', 100);
    container.appendChild(el);

});
</script>

Properties

In the set of attributes, denoted by "setAttribute",  modify the parameters as needed. All of the below properties are customizable by changing the code snippet:

Top Teams

By default, the Top Teams will display the specified number of teams ranked and in a list view.

Sample code

Copy and paste the sample below into a code block to add this to the page:

<div id="topTeamsByCustomField" class="column full no-padding-side top-teams-widget-placeholder" style="margin-top:15px; margin-bottom:15px;"></div>

<script>
/* Example of script block */
var docReady = function (fn) {
    var stateCheck = setInterval(function () {
        if (document.readyState !== "complete") return;
        clearInterval(stateCheck);
        try { fn() } catch (e) { }
    }, 1);
}

docReady(function () {

    if (window.raisin_dd.SiteType === "Desktop Admin") return;
    var container = document.getElementById('topTeamsByCustomField');
    container.innerHTML = '';
    var el = document.createElement('top-teams');
    el.setAttribute('org-id', window.raisin_dd.OrganizationId);
    el.setAttribute('se', window.raisin_dd.SubEventPart);
    el.setAttribute('custom-field-type', 1);
    el.setAttribute('custom-field-value', 'Raymond James');
    container.appendChild(el);

});
</script>

Properties

In the set of attributes, denoted by "setAttribute",  modify the parameters as needed. All of the below properties are customizable:

Event Thermometer

The Event thermometer generates a thermometer bar tallying results from the campaign.

Sample code:

<div id="thermometerByCustomField" class="column full no-padding-side event-thermometer-placeholder" style="margin-top:15px; margin-bottom:15px;"></div>

<script>
/* Example of script block */
var docReady = function (fn) {
    var stateCheck = setInterval(function () {
        if (document.readyState !== "complete") return;
        clearInterval(stateCheck);
        try { fn() } catch (e) { }
    }, 1);
}

docReady(function () {

    if (window.raisin_dd.SiteType === "Desktop Admin") return;
    var container = document.getElementById('thermometerByCustomField');
    container.innerHTML = '';
    var el = document.createElement('event-thermometer');
    el.setAttribute('org-id', window.raisin_dd.OrganizationId);
    el.setAttribute('se', window.raisin_dd.SubEventPart);
    el.setAttribute('custom-field-type', 1);
    el.setAttribute('custom-field-value', 'Raymond James');
    el.setAttribute('bar-color', '#e5582d');
    container.appendChild(el);

});
</script>

Properties

Like in the above, use these properties to customize the display, inputs and filter results:

Top Raised by Custom Field Attribute

Displays top raised amounts by Custom Field attributes in a nested list form and ideal when generating leaderboards by multiple attributes.  In the example below, results are aggregated (parent) list by Custom Field 2, and inner (child) list is displays results with Custom Field 1. In other words, industry type (e.g. Financial Services) is Custom Field 2, and AKA New Media is Custom Field 1.

Sample code:

<div id="topFundraisersByAttribute" class="column full no-padding-side top-raised-by-attribute-placeholder" style="margin-top:15px; margin-bottom:15px;"></div>

<script>
/* Example of script block */
var docReady = function (fn) {
    var stateCheck = setInterval(function () {
        if (document.readyState !== "complete") return;
        clearInterval(stateCheck);
        try { fn() } catch (e) { }
    }, 1);
}

docReady(function () {

    if (window.raisin_dd.SiteType === "Desktop Admin") return;
    var container = document.getElementById('topFundraisersByAttribute');
    container.innerHTML = '';
    var el = document.createElement('top-raised-by-attribute');
    el.setAttribute('org-id', window.raisin_dd.OrganizationId);
    el.setAttribute('se', window.raisin_dd.SubEventPart);
    el.setAttribute('aggregate-rows-number', 10);
    el.setAttribute('inner-rows-number', 5);
    el.setAttribute('aggregate-custom-field-type', 2);
    el.setAttribute('inner-custom-field-type', 1);
    el.setAttribute('title', 'Top Companies');
    el.setAttribute('title-aggregate', 'Industry Name');
    el.setAttribute('omit', ' ');

    container.appendChild(el);

});
</script>

Properties

The table generated by the widget can be modified using the following parameters:

Property	Description	Type
org-id	Organization ID.	number mandatory
se	Event Custom Page URL.	string mandatory
aggregate-rows-number	Number of records to fetch from API for aggregate list.	number default 10
inner-rows-number	Number of records to fetch from API for each inner list.	number default 5
aggregate-custom-field-type	Custom field type for aggregate list.	number
inner-custom-field-type	Custom field type for inner list.	number
title	Widget title.	string
title-aggregate	Header name column title.	string
title-amount-raised	Header amount column title.	string default 'Amount Raised'
omit	Pipe separated list of aggregate list values to omit from the list (e.g. 'Financial Services|Real Estate'). If one of the values in the pipe separated list is a whitespace char then aggregate list items without a value will be omitted.	string

Embedding Leaderboards

Select widgets across the system may be embedded into external websites as widgets. Widgets use a similar code structure and properties, as those above when you're customizing them within the CMS - except that they can live on an external website!

Leaderboard widgets available in the widgets bundle are:

Widget	Description
<fitness-activity>	Display fitness activity information for event, group, team or participant
<fitness-summary>	Display fitness summary information for event
<participant-badges>	Display participant badges for a Participant
<top-fundraisers>	Top fundraisers
<top-teams>	Top teams
<event-thermometer>	Thermometer
<top-raised-by-attribute>	Top raised by attribute

In order to utilize widgets available in the widgets bundle, this script file needs to be loaded into a page

<script src="https://raisincdn-si.akaraisin.com/raisin/js/raisin-widgets.bundle.js" defer></script>

Once the script bundle file is added to a page, the widget element can be used just like a built-in HTML element in content that you add directly into your site.

Here's an example of the Fitness Activity widget for Org ID 2, and Event ID 22578 where the Event's Custom Page URL is "subevent":

<fitness-activity org-id="2" se="npcnpce" entity-id="22758" entity-type="subevent"></fitness-activity>

Leaderboards using raisin API

For all else, raisin offers an Open API with ample Statistics calls that can be employed to interact with your data and create even more customizable leaderboards, thermometers and lists that are filterable across participant properties and fundraising dimensions. Get creative!

API documentation can be found here: https://api.akaraisin.com