C is for Cookie: Convio Platform Townhall #13NTCsweet

C is for Cookie: Convio Platform Townhall #13NTCsweet Jesse Kelsey Jason Wilson

Jesse Kelsey Web Developer Donordigital Berkeley, CA, US Jesse’s web development experience spans the for- and nonprofit sectors, including work in e-commerce, lead generation, digital signage, and community economic development. He remembers building his first web page when AOL was sending blue cd-roms to every household in the U.S., before the term “broadband” was a twinkle in our eyes. Jason Wilson Senior Web Producer Share Our Strength Washington, DC, US The resident web guru at Share Our Strength (a national nonprofit that is ending childhood hunger in America), working on the range of platform sites that help connect and build relationships with the organization's audience. A tech nerd at heart with 15 years experience, online fundraising expert, and freelance web developer, my passion is connecting people with the right actions at the right time online to make lasting change in the world.

C is for Cookie: Convio Platform Townhall This session explores unconventional solutions to work with, and around, a familiar platform, Convio. Learn some front-end coding tricks to transform projects such as an advocacy survey into a dynamic engagement tool.

Examples

Cooking Matters Quiz — Share Our Strength • The Recipe: • Turn a Convio survey into a quiz • Give feedback to users on quiz score • Make dynamic score sharing possible • Implement a more visually engaging design

Cooking Matters Quiz — Share Our Strength http://bit.ly/ZdnNyH

Cooking Matters Quiz — Share Our Strength • The Secret Ingredients: • Cookies • JavaScript/jQuery • HTML/CSS • HTML Captions in Convio

Cooking Matters Quiz — Share Our Strength All about cookies (quirksmode): http://www.quirksmode.org/js/cookies.html <script type="text/javascript"> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=join.strength.org/"; } </script> Include createCookie() javascript function on page 1 (the survey page)

Cooking Matters Quiz — Share Our Strength Use jsonclick events to create cookies for each question/answer combo on page 1. The question code is located in html caption sections on the survey page—the standard Convio questions are hidden**  <p class="quest">1. <span style="color:#df0822;">True or false?</span> Frozen fruits and vegetables are often more nutritious than fresh.</p> <div id="strawdiv"> <img id="strawberry" src="https://secure2.convio.net/sos/images/content/pagebuilder/dd-cm-quiz-bg-strawberry.png" border="0" /></div> <div id="q1" class="qgroup"> <input type="radio" name="1553_6000_2_10563" id="1553_6000_2_10563_1" class="radionew" value="True" onclick="createCookie('Question1','True',0)" /><label class="wrapableradionew" for="1553_6000_2_10563_1">True</label> <input type="radio" name="1553_6000_2_10563" id="1553_6000_2_10563_2" class="radionew" value="False" onclick="createCookie('Question1','False',0)" /><label class="wrapableradionew" for="1553_6000_2_10563_2">False</label> </div>

Cooking Matters Quiz — Share Our Strength <script> $(document).ready(function () { $("tr:contains('XYZ123')").hide(); $("span:contains('Optional: Will you')").hide(); $("span:contains('7.')").hide(); }); </script> Trick: Hide any standard Convio questions without element ids by salting the question and using jQuery to hide(); <span>XYZ123Rinsing canned foods can wash away about how much sodium?</span>

Cooking Matters Quiz — Share Our Strength • Include readCookie() function on survey typage • Create js variables for survey responses • Score questions with if/else statements • Tally totalscore and display throughout ty page function readCookie(name) { varnameEQ = name + "="; varca = document.cookie.split(';'); for(vari=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } var q4 = readCookie('Question4'); if(q4 == "Price of healthy grocery items"){ var score4 = 1; } else { var score4 = 0; } vartotalscore= score1 + score2 + score3 + score4 + score5 + score6;

Cooking Matters Quiz — Share Our Strength <script type="text/javascript"> document.write("<a href=\"http:\/\/www.facebook.com\/sharer\/sharer.php?s=100&p%5burl%5d=http%3A%2F%2Fjoin.strength.org%2Fsite%2FSurvey%3FACTION_REQUIRED%3DURI_ACTION_USER_REQUESTS%26SURVEY_ID%3D6000&p%5btitle%5d=Take%20the%20Quiz%20about%20Healthy%2C%20Affordable%20Eating+&p%5Bimages%5D%5B0%5D=https%3A%2F%2Fsecure.strength.org%2Fimages%2Fcontent%2Fpagebuilder%2Fdd-cm-quiz-ty-sidebar-photo.jpg&p%5Bsummary%5D=I%20scored%20" + totalscore +"%20out%20of%206%20questions%20in%20a%20quiz%20about%20healthy%2C%20affordable%20eating%20from%20Cooking%20Matters%20and%20the%20ConAgra%20Foods%20Foundation.%20What%20do%20YOU%20know%20about%20healthy%2C%20affordable%20eating%3F%20It%27s%20on%20--%20take%20the%20quiz%20and%20find%20out%20your%20score.%0D%0A\">"); </script> ?

Cooking Matters Quiz — Share Our Strength Dynamic description and custom fb share

Taste Tester Feedback

Hunger Knows No Party — Share Our Strength • The Recipe: • Dynamic/interactive Tweets • Timely response • Add Convio survey/list building elements

Hunger Knows No Party — Share Our Strength Version A: http://bit.ly/X7LzJs Version B (w/ Survey): http://bit.ly/YtUD8u

Hunger Knows No Party — Share Our Strength • The Secret Ingredients: • JavaScript/jQuery • HTML/CSS • In-house social media formatting tool • ConvioPagebuilder/Convio survey

Hunger Knows No Party — Share Our Strength “viral” version is a simple survey (FN, LN, email) that redirects to the main Tweet page upon thank you/confirmation.

Hunger Knows No Party — Share Our Strength // hide the span tags that will contain the description jQuery("#descspan").hide(); // change the question border color if button selected and grab description text jQuery("#quest1select").click(function() { jQuery("#quest1").css("border","3px solid #f26722"); jQuery("#quest2, #quest3, #quest4div").css("border","3px solid #a69c91"); vargrabdesc = jQuery("#quest1").text(); vardescription = encodeURIComponent(grabdesc); jQuery("#descspan").text(description); jQuery("#previewtweet").text(grabdesc); // Get and write candidate selection jQuery("#tweetobama").click(function() { var candidate = "BarackObama"; vartwitUrl = "http://twitter.com/?status=" + jQuery("#descspan").text() + "%20%40" + candidate; window.location = twitUrl; }); });  <span id="descspan"></span>

Hunger Knows No Party — Share Our Strength

Hunger Knows No Party — Share Our Strength http://www.facebook.com/sharer/sharer.php?s=100&p%5burl%5d=http%3A%2F%2Fjoin.strength.org%2Fsite%2FPageNavigator%2F2012_DD_Hunger_Knows_No_Party_B.html&p%5btitle%5d=Hunger%20Knows%20No%20Party+&p%5Bimages%5D%5B0%5D=https%3A%2F%2Fsecure2.convio.net%2Fsos%2Fimages%2Fcontent%2Fpagebuilder%2Fdd-election-lp-fbshare.jpg&p%5Bsummary%5D=Join%20Team%20No%20Kid%20Hungry%20in%20asking%20Mitt%20Romney%20and%20Barack%20Obama%20the%20tough%20questions%20they%20can%27t%20ignore.%0D%0A

Taste Tester Feedback DD Blog Post: http://bit.ly/12FtZf4

More Examples

Holiday Cards — Share Our Strength http://bit.ly/V5HeqG

Back to School — Share Our Strength http://bit.ly/BTS2_FB

TeamRaiser — TeamBE THE MATCH http://bit.ly/XBOndZ

Proud to Belong — PETA http://bit.ly/Ywjxpv http://bit.ly/ZGCavC

Sustainer Conversion — PETA http://bit.ly/Wghrh4

Charter Member Premiums — NMAAHC http://bit.ly/Zy4gFq

Healthy Kids Challenge TR — Children’s Health Fund http://bit.ly/13QKiGu

Q/A, Comments, Ideas

Contact Info Jesse Kelsey Web Developer Donordigital jesse@donordigital.com Jason Wilson Senior Web Producer Share Our Strength jwilson@strength.org

Evaluate This Session! Enter for a chance to win an NTEN engraved mini iPad! Or, search by session title at www.nten.org/ntc/eval

C is for Cookie: Convio Platform Townhall #13NTCsweet