Who Was I?

• Failed High School Teacher
• Failed FM DJ at a Classic Rock Station
• Failed Writer
• Failed Coffee Shop Manager
• Failed Stock Boy at a Liquor Store
• Failed Best Buy Service Plan Pusher

Who Am I?

• Real Name is Just the Letter J
• Older than you think
• Married 19 years, 9 year old daughter
• Own a Basset Hound, the most ridiculous breed of dog ever created
• 5 Years at Blackbaud
• Senior Interactive Web Developer IV
• Specialize in BBIS Front End Customizations

The Old Way

Ghosting the Form

BBIS Tools and Parts

kills the practice of

Ghosting the Form

BBIS API

Unchains the donation form from its table, allows dynamic content, allows cross domain calls, and gives us access to our CRM data.

And Makes Responsive Design Easier

What are the tools?

• Advanced Donation form / Donation API
• Query Display / Query API
• Record Search and Record Display
• Custom Content Part
• Unformatted text and other traditional parts

The Danger?

Remember the words of Uncle Ben

Responsive Design

Our "Foundation"

Our CSS

With BBIS we can add multiple stylesheets just as we would with in a standard hosted website.

We can also specify stylesheets specifically for mobile or desktop... but we don't need to do that when we can use media queries.

Complex media queries do not play well with the BBIS CSS compressor, so we add a piece of code that allows our media query to be ignored by the compressor.

Our JavaScript

As with our CSS we can add JS libraries, plugins and custom code the same way we would in a standard hosted environment.  Using the Files section we can create a JS folder and place our files there, then include them at the layout level for all our pages.

Other Best Practices to Note

Example

West Point Association of Graduates

Advanced Donation Form

and the Donation API

var bbisURL = BLACKBAUD.api.pageInformation.rootPath;
var donationService = new BLACKBAUD.api.DonationService(partId, 
    {
        url: bbisURL, 
        crossDomain: true
    });
donationService.createDonation(donation, donationSuccess, donationFail);

donationSuccess and donationFail are our callback functions for those respective events.

REST API Documentation

{
   "Donation":{
      "Donor":{  //Donor Data
         "Address":{
            "City":"Columbia",
            "Country":"United States",
            "PostalCode":"29212",
            "State":"SC",
            "StreetAddress":"123 Main St."
         },
         "EmailAddress":"john.doe@blackbaud.com",
         "FirstName":"John",
         "LastName":"Doe",
         "Phone":"555-555-5555",
         "Title":"Mr."
      },
      "Gift":{  //Gift Data
         "Designations":[  //Designations are an array of ID and Amount
            {
               "Amount":5,
               "DesignationId":"3439a5c7-9977-4f9c-ba11-fadfb8144d35"
            }
         ],
         "FinderNumber":0,
         "IsAnonymous":false,
         "PaymentMethod":1,
         "Comments":"Gift comments here.",
         "CreateGiftAidDeclaration":false,
         "Attributes":[ //Custom Attributes are an array of ID and Amount
            {
               "AttributeId":"BD18B3FD-B382-4183-A415-8F84B1E0E411",
               "Value":"Volunteer;Member;Alumni"
            },
            {
               "AttributeId":"3607C77D-19DC-4EE0-A0CD-A352762A8EF0",
               "Value":"1985"
            }
         ],
         "Recurrence":{ //Optional Recurrence
            "DayOfMonth":26,
            "DayOfWeek":null,
            "EndDate":null,
            "Frequency":2,
            "Month":null,
            "StartDate":"\/Date(1337227200000-0400)\/"
         },
         "Tribute":{ //Optional Tribute
            "Acknowledgee":{
               "AddressLines":"123 Sunset ln.",
               "City":"Charleston",
               "Country":"USA",
               "Email":"email@address.com",
               "FirstName":"Joe",
               "LastName":"Schmo",
               "Phone":"123-123-1234",
               "PostalCode":"29482",
               "State":"SC"
            },
            "TributeDefinition":{
               "Description":"New tribute",
               "FirstName":"John",
               "LastName":"Hancock",
               "Type":"Tribute"
            },
            "TributeId":null
         }
      },
      "Id":"853f96be-bf08-4828-aefa-326a06e48d31", //Created by BBIS/BBSP
      "Origin":{
         "AppealId":"C3B20FD8-6A81-451E-BF78-D195E82B4CBF",
         "PageId":784,
         "PageName":"Sample Page"
      },
      "TransactionStatus":1
   },
   "BBSPCheckoutUri":" https://payments.blackbaud.com/Pages/Index.aspx?t=853f96be-bf08-4828-aefa-326a06e48d31"
}

The Donation API Object

Example

Indiana University Advanced Donation Form

(and Designation Search)

Did you Notice That?

BLACKBAUD.api.DonationService(partId, {url: bbisURL, crossDomain: true});

That's correct.  You can call the Donation Service from ANY DOMAIN.

You can just as easily process this transaction in Drupal or a Wordpress site!  You heard that right.

Crazy trick that works with BBNC too...

BLACKBAUD.netcommunity.Cart.AddDonationToCart(amount, designationID, description);

Another Example

With the Donation API and the Advanced Donation form we can reduce the number of 'taps'

Mobile Taps Form

Query Display, Record Search and Record Display Parts

Example

TCU Calendar System - (Behind Firewall)

Record Search

Grabs events from CRM based on the CRM query created and displays them on a BBIS page.

Record Display

Links from record search automatically add the GUID to the URL, which is then digested by the Record Search part to display the correct details.

Example

OSU's Query Display

With the Query API, we aren't tied to using the Parts.  We can create our own JavaScript and HTML solution.

Example

Arizona's Thermometer

Example

WFCO's Dynamic Tribute Wall

Maybe I didn't say it enough.

Just like the Donation API - the Query API is CROSS DOMAIN.

The Future

Angular?!  Oh, Yes.

Souped Up, Super Fantastic, Angular Giving Search

Custom Content Part

What is it?

A Part that allows us to create engaging and media rich content pieces that our content editors can’t destroy. 

Its beauty is, with a little bit of extra work at the beginning, we can create a part that is virtually indistinguishable from a standard BBIS part.

And we can use all the tools we've already covered.

For instance we can quickly create some code to handle callout boxes.

That's just the beginning.

We can just as easily create a slideshow that our content editors can deploy, reuse, and edit as simply as they do standard content

Example

U of M slideshow

No reason to reinvent the wheel here.

Use your favorite slideshow plugin.

Or create new widgets.

Like a social media widget.

Example

Social Media Photo Stream

Give Away!!!

Giving out a free mini donation form

custom content part.

Example

Mini Donation form

The Results

• 42% of our donations to our primary form (whose audiences enter from the site, as opposed to an email or some other source) have been started through the mini-donation form above. 
• We've been able to increase the average online donation to the College of Charleston from $193 to $259 (compared to the same time period last year)
• We've increased both total online donors (+47%) and online dollars (+97%) (compared to the same time period last year)

Jacee Brown
WEB STRATEGY MANAGER
Institutional Advancement

COLLEGE of CHARLESTON

What Questions Do You Have?