Building an innovative fundraising tool for No Kid Hungry

Screen Shot 2014-01-28 at 8.45.02 AMThe Developer Team at Donordigital is called on regularly to build innovative fundraising tools for its nonprofit clients, who are constantly seeking new ways to engage supporters and making giving fun and easy.  A recent project for our client No Kid Hungry called on us to make creative use of custom JavaScript and jQuery functions as well as working with the Blackbaud Luminate API, and to convert all these tools into an innovate “image tile” user experience for the donor.

After strategizing with our internal project team, we determined the best way to assemble the various tools at our disposal:

  1. Get campaign dollar amount raised through the Blackbaud Luminate API.
  2. Convert these dollars to a control number to establish what content to serve to donors.
  3. Use JavaScript functions to create tiled images to overlay the header image of the donation page.
  4. Animate those tiled blocks with jQuery on the thank you page, revealing the image underneath.
  5. More JavaScript writes the HTML for a Gallery of the past images from the campaign, and their social icons.

First we used some of the Blackbaud Luminate API to get the dollar amount raised so far by the campaign. Originally the idea was for the number of starting tiles on the image to get progressively smaller as we raised more money. Then when the last one was revealed, the child’s image would be unlocked, and a new image with a different child would be the new background. Even though this idea wasn’t used in the final product, and we chose to update the pictures manually, the functionality that I built made this updating process much easier. Instead of rewriting a bunch of HTML, I would update one JavaScript variable, and the code would take care of the rest.

The tiles themselves are all generated by a JavaScript function. Instead of cutting up the image into a bunch of boxes, we loaded the whole image once on pageload, and then used a mapping algorithm to set sections of it as the background image of each box. Again, this came in handy when the overlay image changed in production a few times. We didn’t have to waste time cutting up a new image each time there was a change.

For the animation, we tested a bunch of different options, but in the end I used jQuery’s .animate() function. It’s a little heavier on memory use compared to other functions in the jQuery library, but the trade off of a clean final product was worth the extra load. The function that fires the animation selects boxes at random, so users get a different feel each time. It can also tell when the box is close to the image border, which keeps the animation from flying off the page.

Lastly, at the bottom of the page, I wrote up a framework for all the images to be shared once they were ‘unlocked’ by donations. More JavaScript was implemented here, controlled by that dollars raised amount we got from the campaign. Again, I didn’t end up using that variable in the final product, but having the framework already built made updating the page a breeze once the campaign was underway.

nick_robitailleNick Robitaille is a Junior Web Developer at Donordigital.