BBCON 2015: Luminate Customizations Extravaganza

Luminate Customizations ExtravaganzaPRESENTED BY:CHRIS CAIN, CHRIS BACKUS & NOAH COOPER

3 #bbcon

Chrome wheeled, fuel injected and steppin out over the line with

Luminate customizations! #bbcon

Tweet this now

4 #bbcon

Agenda• Intros • What is a customization? • Examples of customizations • Recap • Q&A

What is a customization?

There’s a spectrum!

Small

Medium

Large

1 #bbcon

CHRIS BACKUS

Plain old CSS and JavaScript

• Prettier checkboxes, radio buttons, and other fields on donation forms

Simpler Customizations

Plain old CSS and JavaScript

• Responsive Advocacy

Simpler Customizations

Playing with S-tags

• Create a custom, responsive progress meter

Simpler Customizations

Playing with S-tags

Simpler Customizations

Playing with S-tags

• Custom “badges” on participant or team pages. • Example: “Emailer” tag based on [[S48:0:if-emails-gt:0]]

[[?[[S48:0:if-emails-gt:0]]::TRUE:: <!– “emailer” badge content here --> <img src=“../images/emailer.jpg” alt=“I’ve sent emails!” /> ::]]

Simpler Customizations

Use S-tags and conditionals to render dynamic content

• Customize wrapper or page content based on a URL parameter, or by which Affiliate the current page belongs to

Slightly Less Simple

Slightly Less Simple

Working with the API

• Custom “Activity Scheduler” for Alzheimer’s Association’s “The Longest Day” Participant Center using the logInteraction, updateInteraction, and listUserInteractions API method

More Advanced

Working with the API

• Use the getParticipationTypes and login method (along with some s-tag tomfoolery) to create a customized TeamRaiser registration flow

More Advanced

There isn’t an API for that?! Ugh, fine, I’ll just create my own! >:O

• Use s-tags on a PageBuilder page to create your own API by rendering the data you want and making an AJAX call

Even More Advanced

Even More Advanced

There isn’t an API for that?! Ugh, fine, I’ll just create my own! >:O

Even More Advanced

16 #bbcon

Rethinking the Development Workflow NOAH COOPER

17 #bbcon

TRADITIONAL DEVELOPMENT CYCLE

• Developer writes code and saves it on their computer

• Developer copies code to Luminate Online

• Code is manually tested

• For organizations with a dev site, these steps are repeated on production

• Without a dev site, development and testing happens on the live website

18 #bbcon

THE NOT-SO-GOOD ASPECTS OF THAT

• Code is stored on one person's computer

• Multiple developers have conflicting copies of files and overwrite each other's work

• Code is manually moved around which takes a lot of time and causes errors

• Uploading a new version of a file over and over causes caching problems

• Code is manually tested by a human only

• Moving code from dev to production is manual and slow

• Organizations without dev sites may accidentally break a live website

20 #bbcon

A NEW, INDUSTRY-STANDARD WORKFLOW

• Free, third-party tools (Grunt, GitHub, and DeployBot)

• Code is version controlled

• Files are automatically tested, compressed, timestamped, and pushed

• Branching enables simultaneous development

• Push to production down to ~1 second

21 #bbcon

Custom Donation Form: Make-a-Wish America NOAH COOPER

22 #bbcon

MAKE-A-WISH DONATION FORM `

http://site.wish.org/donate_now

23 #bbcon

MAKE-A-WISH DONATION FORM

• Mimics primary website • One page wrapper and donation form for hundreds

of affiliates • Dynamically defined assets

23 #bbcon

MAKE-A-WISH DONATION FORM

• Custom design, but still dynamic

• Large buttons instead of radio buttons

• URL overrides to display different levels

23 #bbcon

MAKE-A-WISH DONATION FORM

• Honor/memorial gifts with Ecards, print cards, and printable PDFs

• List of cards are controlled by a file the organization maintains

23 #bbcon

MAKE-A-WISH DONATION FORM

• Donor intent is set by URL, but can be manually overridden

• Local chapters selected by name or state, or using ZIP Code mapping based on CSV

23 #bbcon

MAKE-A-WISH DONATION FORM

City and State set automatically using Google API

23 #bbcon

MAKE-A-WISH DONATION FORM

Auto-correcting credit card number format

24 #bbcon

Custom TeamRaiser Website: JDRF One Walk NOAH COOPER

25 #bbcon

JDRF ONE WALK

http://walk.jdrf.org

26 #bbcon

JDRF ONE WALK

Everything is responsive (and awesome)

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

Google Analytics Exception tracking shows frequency of errors, and details on what went wrong

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

Simplified address entry

26 #bbcon

JDRF ONE WALK

Even easier when logged in

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

26 #bbcon

JDRF ONE WALK

27 #bbcon

Realtime Reporting With Luminate Online Data Viewer NOAH COOPER

28 #bbcon

LUMINATE ONLINE DATA VIEWER

http://convio.github.io/luminate-online-data-viewer

23 #bbcon

LUMINATE ONLINE DATA VIEWER

• In most cases, true realtime reporting isn’t necessary

• Except … sometimes it is, like radiothons/telethons

• Running a report may take several minutes • Front-end status indicators are cached for ~15

minutes for performance • So what’s the answer?

29 #bbcon

LUMINATE ONLINE DATA VIEWER