Once you have added micro-donations to your eCommerce, you're ready to start showing off how GOOD your customers are.

You are probably familiar with easy-to-use cut-and-paste code-snippets from other services like Google Analytics and Footprints micro-donations work the same way.

How to show off how GOOD your customers are

You probably have a CMS or blog so create a new page where you can demonstrate your customers giving via your Brand.

To pull the last few micro-donations and display them on a page is very easy with some simple jQuery.

Here is an example of how this might look with the last ten customer donations animating through a cycle:

It's really very easy with jQuery and we've broken the code down so marketers, bloggers and non-coders can understand how to do this.

First, set up your javascript:

< script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
< script src="//cdn.worldnomads.net/Themes/Nomads/scripts/modernizr.js" type="text/javascript">

then set up any styling (or you can do this bit later once its working):

    < style type="text/css">
    #customer-donations-widget {
        font-size: 1rem;
        color: #ffffff;
        font-weight: 400;
        padding: 30px;
        background-color: #aaa;
    }
    

then create the container to put the widget into:

    < div id="customer-donations-widget">
    < div id="project-donation">
< /div>
    < /div>

Now comes the actual script that gets your customer donations, puts them into a string and animates them.

The essential bit to look for here is PartnerGroupCode which filters the donations to those from your business.

< script type="text/javascript">
     $.get('//api.footprintsnetwork.org/v1/donations/recent?PartnerGroupCode=WN',
    function (donations) 
    {var i = 0;
    updateDonation();
    setInterval(updateDonation, 10000);
    function updateDonation() {var donation = donations[i];
    i++;
    $('#project-donation').html
    (' ' +(+donation.amount).toFixed(2) + 
    ' ' + donation.currency + 
    for ' + donation.project.title +
    '
' + ' ' +
    moment(donation.createdDateTime).fromNow() + 
    ' via ' + donation.partner.name + '');
      }
     });
    < /script>

and lastly:

    < script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.js">