C is for Cookie: Convio Platform Townhall #13NTCsweet

C is for Cookie:Convio Platform Townhall#13NTCsweet

Jesse KelseyJason Wilson

2

Jesse KelseyWeb DeveloperDonordigitalBerkeley, 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 WilsonSenior Web ProducerShare Our StrengthWashington, 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

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


http://bit.ly/ZdnNyH





7


The Secret Ingredients:

• Cookies

• JavaScript/jQuery

• HTML/CSS

• HTML Captions in Convio

8

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

All about cookies (quirksmode):http://www.quirksmode.org/js/cookies.html


IncludecreateCookie() javascript

functionon page 1 (the survey page)

http://www.quirksmode.org/js/cookies.html

http://www.quirksmode.org/js/cookies.html

9

<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="wrapable radionew" 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="wrapable radionew" for="1553_6000_2_10563_2">False</label> </div> 


Use js onclick 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**

10

<span>XYZ123Rinsing canned foods can wash away about how much sodium?</span>

<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();

11


function readCookie(name) {var nameEQ = name + "=";var ca =

document.cookie.split(';');for(var i=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;}

var totalscore= score1 + score2 + score3 + score4 + score5 + score6;

• Include readCookie() function on survey ty page• Create js variables for survey responses• Score questions with if/else statements

• Tally totalscore and display throughout ty page

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


Dynamic description and custom fb share

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


Version A:http://bit.ly/X7LzJs

Version B (w/ Survey):http://bit.ly/YtUD8u

http://bit.ly/X7LzJs



http://bit.ly/YtUD8u



17


The Secret Ingredients:

• JavaScript/jQuery

• HTML/CSS

• In-house social media formatting tool

• Convio Pagebuilder/Convio survey

18


“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"); var grabdesc = jQuery("#quest1").text(); var description = encodeURIComponent(grabdesc); jQuery("#descspan").text(description); jQuery("#previewtweet").text(grabdesc);

// Get and write candidate selectionjQuery("#tweetobama").click(function() { var candidate = "BarackObama"; var twitUrl = "http://twitter.com/?status=" + jQuery("#descspan").text() + "%20%40" + candidate; window.location = twitUrl; });});

<span id="descspan"></span>

20


21


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

http://bit.ly/12FtZf4

http://bit.ly/12FtZf4

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 — Team BE 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



Q/A, Comments, Ideas

32

Contact InfoJesse KelseyWeb [email protected]

Jason WilsonSenior Web ProducerShare Our [email protected]

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

Documents

C is for Cookie: Convio Platform Townhall #13NTCsweet