Embed Size (px)
Citation preview
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
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
