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.

Hunger Knows No Party: Social media engagement campaign for Share Our Strength

Hunger Knows No Party

Author’s Note: this post is part two in a two-part series, adapted from a session by Jesse Kelsey (Donordigital) and Jason Wilson (Share Our Strength), first presented at the 2013 Nonprofit Technology Conference in Minneapolis, Minnesota. We explored unconventional solutions to work with Blackbaud’s Luminate platform (formerly Convio).

PART TWO: Hunger Knows No Party

The goal of this campaign was for our network to engage the presidential candidates last October, and let them know that hunger is an important issue. The topic was timely (communications went out immediately following a presidential debate) and a great way to engage our core audience while raising awareness via social media.

This is the “recipe” that we used as a guide for the landing page, which enables advocates to post tweets to Presidential candidates’ Twitter pages:

  • Dynamic/interactive Tweets
  • Timely response
  • Add Convio survey/list building elements

Some of the secret ingredients used in this recipe:

  • JavaScript/jQuery
  • HTML/CSS
  • In-house social media formatting tool
  • Convio Pagebuilder/Convio survey

This “viral” version of the landing page, meaning the one that was picked up through social networks and shares by email (not the version that we sent to our in-house list), sent people first to a Convio Pagebuilder page with a very short survey, requiring first name, last name, and email address information.

Upon submitting information, the advocates, also newly subscribed to the Share Our Strength email list, were redirected to a page with interactive ways to tweet either Barack Obama or Mitt Romney, who had just participated in a presidential debate (October 2012). People were encouraged to “Join Team No Kid Hungry in asking Mitt Romney and Barack Obama the tough questions they can’t ignore,” and provided with a few example questions to tweet, or the ability to send a custom tweet.

Tweet example for Hunger Knows No Party

Most of the magic on this landing page happened with the use of JavaScript. For example, once a question was selected, a preview window updated automatically just below the questions. Once either the “Tweet Romney” or the “Tweet Obama” buttons were clicked, a custom tweet was packaged up using JavaScript to include the selected question, two hash tags (#NoKidHungry and #election2012), a shortened url with the “viral” version of the page, and the appropriate candidate Twitter handle (“@BarackObama” or “@MittRomney”).

Let’s dissect one example, and choose the first question: “Will you help ensure that no child grows up hungry in America? #NoKidHungry #election2012 http://bit.ly/voteNKH

When the “Select This Question” button is clicked, the following is what happens in the code:

// the function below fires when the button is pressed to select question one
jQuery("#quest1select").click(function() {

// the border around question one is turned orange
jQuery(“#quest1”).css(“border”,”3px solid #f26722″);

// the border around the other three questions turn gray
jQuery(“#quest2, #quest3, #quest4div”).css(“border”,”3px solid #a69c91″);

// the text string within the question one box is turned into a javascript variable
var grabdesc = jQuery(“#quest1”).text();

// the text string is encoded as it will be used in a Twitter share url
var description = encodeURIComponent(grabdesc);

// a hidden section of HTML code is updated with the encoded text string
jQuery(“#descspan”).text(description);

// the preview window below the questions is updated with the text from question one
jQuery(“#previewtweet”).text(grabdesc);
});

Then, when the button for a specific candidate, let’s say Barack Obama, is clicked, this is what happens in the code:


// the button is pressed to tweet obama
jQuery("#tweetobama").click(function() {
// a text string, BarackObama, is created as a variable
var candidate = "BarackObama";
// a Twitter share url is constructed using the hidden tweet from the function above
var twitUrl = "http://twitter.com/?status=" + jQuery("#descspan").text() + "%20%40" + candidate;
// the advocate is redireted to the newly assembled Twitter share url
window.location = twitUrl;
});

Within the first 24 hours, tweets generated nearly 1.1M impressions and reached an audience of 252,454 followers — generating hundreds of tweets from our network. Twitter advocacy isn’t necessarily an area we’ve put a lot of effort into up until this point, but as a result of this campaign, we will be building out more Twitter-centric advocacy campaigns.

Download the full presentation slides here, from C is for Cookie: Convio Platform Townhall, a presentation from the 2013 Nonprofit Technology Conference.

Convio Quiz Cookie Recipe

Yum, it's a cookie

With some creativity and the use of standard front-end code, a bland online survey can be sweetened and transformed into an engaging, interactive, and shareable quiz that keeps advocates energized around a cause.

Our client Share Our Strength engages constituents online using Convio fundraising software in service of their mission to end childhood hunger in America.

Convio has a handy set of tools and can wrangle lots of data in meaningful ways on the backend, but creating a default survey experience for constituents can leave nonprofit advocates and donors hungry for a little bit more. We at Donordigital worked with Share Our Strength to create a quiz experience that would offer all the bells and whistles to deeply engage people with Share Our Strength’s mission.

When Share Our Strength released It’s Dinnertime: A Report on Low-Income Families’ Efforts to Plan, Shop for and Cook Healthy Meals, we worked together to create this short “Cooking Matters” quiz with the goal of increasing mission awareness and promoting the report.

During the implementation for this quiz, which is a survey that is built on top of the Convio platform, we encountered several desired features that we couldn’t quite make happen with the features in Convio. One example is the lack of a straightforward way to score the quiz in order to give the constituent immediate feedback.

So we turned to a more front-end approach and created a few cookies on the quiz page, in order to read those cookies and do more fun stuff with them on the thank you page. Then, on the survey thank-you page, we were able to score the quiz, highlight the answers, create some dynamic sharing features, and, generally, sweeten up the user experience.

Here is a quick cookie recipe, if you’d like to try this yourself at home:

Convio Quiz Cookie Recipe:

  • Include a javascript function to createCookie() on the quiz page (this is the best resource I’ve found to date on implementing cookies).
  • Call the createCookie() function to set a cookie when a quiz answer is selected. It looks kind of like this on a survey question in Convio:
  • Include a javascript function to readCookie() on the thank you page of the quiz.
  • Define some variables on the thank you page and read the cookies. That looks like this:
  • Use the javascript variables to add up scores, display answers, create dynamic share descriptions, etc.
  • To view the code (you can—since it’s front-end code), take the quiz and see what’s happening when you view > source in any web browser.
  • Enjoy!

Jesse Kelsey is a Web Developer at Donordigital, and will be speaking at NTEN’s upcoming (April 2013) Nonprofit Technology Conference in Minneapolis, MN. Look for his session, called “C is for Cookie: Convio Platform Townhall.”