1 / 33

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

nathan-serrano
Download Presentation

C is for Cookie: Convio Platform Townhall #13NTCsweet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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.

  3. 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.

  4. Examples

  5. 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

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

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

  8. 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)

  9. 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** <!-- Question The First --> <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> <!-- END Question The First -->

  10. 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>

  11. 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;

  12. 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> ?

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

  14. Taste Tester Feedback

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

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

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

  18. 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.

  19. 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; }); }); <!-- START hidden code section for dynamic share --> <span id="descspan"></span> <!-- END hidden code section for dynamic share -->

  20. Hunger Knows No Party — Share Our Strength

  21. 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

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

  23. More Examples

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

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

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

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

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

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

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

  31. Q/A, Comments, Ideas

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

  33. 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

More Related