CiviEvent ticketing and checkin with barcodes

[jcm55]

I've recently implemented this for our Civi install for a theatre company.  There are two parts:

1) Adding barcodes to event registration thankyou page and e-mail receipts

We use the participant ID as our "ticket ID."  This is a handy built-in unique identifier, although not particularly secure.  We operate a children's theatre for family audiences, so ticket fraud is not a major concern, but if you need a more secure solution, you could build a hook to generate longer random number/character sequences as the ticket ID and store them as custom fields associated with the participant.

For the barcode generation, I installed this package: https://www.barcodephp.com
The code is free to download, but requires a $60 license if you use it commercially.  It exists on our web server as a completely separate install, outside of Drupal/CMS and CiviCRM and it's only function is to generate a barcode image (png, jpg or gif) from text/number that's passed in as a URL param.    So, for example, if you do a GET on:

http://www.MYSITE.org/barcodegen/html/image.php?code=code39&o=1&dpi=72&t=30&r=2&rot=0&text=MYTEXT&f1=Arial.ttf&f2=14&a1=&a2=&a3=

The php code returns a png image of a barcode that encodes the string "MYTEXT".  If you visit the base url (/barcodegen) without any params, you get a nice form that builds all the URL params for you to adjust barcode type, size, height, font, etc.

Now that we have a generic barcode generator utility, we can insert a bit of code into the event ThankYou page and email receipt to embed a barcode based on the participant ID.  In Civi 4.1.0+ $participantID is available as a variable in templates, so to insert a barcode that encodes the participant ID, we override CRM/Event/Form/Registration/ThankYou.tpl and insert something like this wherever you want the barcode to appear on the ThankYou page:

Code: [Select]

    {foreach from= $participantIDs item=code key=no}
        <img style="display: block; float: left;" src="//www.MYSITE.org/barcodegen/html/image.php?code=code39&o=1&dpi=&t=20&r=2&rot=0&text={$code}&f1=Arial.ttf&f2=14&a1=&a2=&a3=">
    {/foreach}

Participant ID is not yet available as a variable for e-mail templates although I have CRM-9829 open to get this in a future release.  For the time being, we need to make a one-line patch to CRM/Event/BAO/Event.php to expose $participantID (taken from http://forum.civicrm.org/index.php?topic=14713.0):

Code: [Select]

Index: CRM/Event/BAO/Event.php
===================================================================
--- CRM/Event/BAO/Event.php (revision 28783)
+++ CRM/Event/BAO/Event.php (working copy)
@@ -1051,7 +1051,7 @@
                 if ( $lineItem = CRM_Utils_Array::value( 'lineItem', $values ) ) {
                     $sendTemplateParams['tplParams']['lineItem']   = $lineItem;
                 }
+                $sendTemplateParams['tplParams']['participantID']  = $participantId;
                 require_once 'CRM/Core/BAO/MessageTemplates.php';
                 if ( $returnMessageText ) {
                     list ($sent, $subject, $message, $html) = CRM_Core_BAO_MessageTemplates::sendTemplate($sendTemplateParams);

Now we can insert the barcode into the receipt e-mails as well, by going to Admin -> Communications -> Message Templates, editing the System Workflow messages for Registration Confirmation and Receipt, and inserting something like this where you want the barcode to appear:

Code: [Select]

    <img src="//www.MYSITE.org/barcodegen/html/image.php?code=code39&o=1&dpi=&t=20&r=2&rot=0&text={$participantID}&f1=Arial.ttf&f2=14&a1=&a2=&a3=" alt="Ticket ID: {$participantID}">

2) Live event check-in interface

For this, we bought two very reasonably-priced $37 barcode scanners:
http://www.amazon.com/Handheld-Automatic-Barcode-Scanner-Reader/dp/B003OUQ174/

These work great and have been very reliable.  No drivers required for any Mac/PC because the scanner emulates a USB keyboard.

I then built a view using the Drupal Views 2 and the CiviCRM Views integration.  It also makes use of the Views PHP and Views Table Highlighter modules.  I'm not sure the best way to share a specific Views module configuration, so I'll do my best here to describe how I've built it.

-- I started with a View that creates a table of all event participants: last name, first name, participant ID, source, status
-- Added a filter to limit the list to a single event.
-- Added an argument and a bit of PHP code to set the event ID for the filter based on an arg passed in the View URL
-- Added a text <span> in the View header to report the total number of checked-in participants using a call to CRM_Event_BAO_Event::eventTotalSeats().
-- Added an <input> field in the View header with a javascript onkeypress handler.  This is where scan data from the barcode scanner will be entered.  The onkeypress handler checks that the scanned participant ID exists in the table of participants below (and is not already checked-in) and then calls the CiviCRM ajax API to update that participant record from "Registered" to "Attended."  The javascript also refreshes the View after each scan so that the checked-in count and participant status column are up to date.  Also there's nothing magic about the barcode scanner -- you can just as easily type a participant ID into this field and hit enter.
-- Added some code to the participant last name field to output that field as a clickable link.  Clicking on a last name will also check in that participant.  Useful for attendees who have neglected to bring a printout of their receipt/confirmation with barcode.
-- Changed the View style to Views Table Highlighter (module required).  Coupled with a bit of css, this makes the rows for checked-in participants appear as red strikethrough text.

I'm happy to share code snippets for the View configuration on request, although if you've never used the Drupal Views 2 module before, I'd suggest you spend some time getting familiar with it before you attempt to replicate this.

[petednz]

nice write up - thanks - expect a note from lobo suggesting this goes on the Blog to get wider audience

[Donald Lobo]

Thanx peter for the reminder I forgot about it, but did tweet the link to the forum post

Hey Jim: Would you please (pretty please) write a blog post on how you've used and adapted CiviCRM for BACT. Would really help similar orgs take the  next step and integrate CiviCRM into their daily needs. You have blogging privileges here:

http://civicrm.org/blogs/jcm55

Also since you are in the bay area, would be great if you can attend:

CiviCon : http://civicrm.org/civicrm/event/info?reset=1&id=174

and the

pre-sprint: http://civicrm.org/civicrm/event/info?reset=1&id=183

OR

post-sprint: http://civicrm.org/civicrm/event/info?reset=1&id=184

Would love to get some / all of this functionality into the core code base so that other folks could use easily

lobo

[jcm55]

Okay, I've officially taken off work and registered for CiviCon, so I will be there on Apr 2.  I can probably also sneak away for part of Friday 3/30 to come to the code sprint, but definitely won't be able to come all day both days.

I will also commit to some blog posts in the near future on BACT's CiviCRM use and adaptation.

[Donald Lobo]

Thats great news indeed thanx for doing so, and see ya at civicon

Looking forward to the blog posts, hopefully before civicon

lobo

[tiborg]

What is the best drupal and civicrm version for this solution? Work with the newest? (4.x)? thank you

[kennedy]

Has anyone been able to do a similar Live event check-in interface like Jim? Please Jim can I see your code?
Help if you can, thanks.

[jakecivi]

I'm happy to share code snippets for the View configuration on request, although if you've never used the Drupal Views 2 module before, I'd suggest you spend some time getting familiar with it before you attempt to replicate this.

jcm55: If you're willing to post the Views code, I'd love to see it. Very familiar with Views 2, just don't want to replicate work unnecessarily.. Thanks..

[jjpwilliams]

I too would love to view the code you implemented in views for part 2, especially the javascript used to update the participant status from registered to attended.

[jcm55]

Here's the view and accompanying javascript (below).  I will warn that there's a bunch of custom stuff in here which is specific to our implementation, like seat rows/numbers for each participant.  See attached image for how the view looks.

We use this with the Views Table Highlighter module and some custom css so that the rows for the already-checked-in participants show in red strikethrough text.

The header section of the view has a field which accepts a participant ID.  On <ENTER> the field calls some javascript which updates the participant status to "Attended" via the Civi API and reloads the view table to show that participant as now checked in.  You can also use this with a keyboard emulator USB barcode scanner to scan participant IDs from printed registration confirmations.  Or, just click on the participant's name in the table to check them in.

To be honest, our staff stopped using the barcode/scanner some time ago.  It was not much of a time saver over just locating people by name in the list and clicking to check them in.  Especially when half of the people forget to bring their printed confirmation, or show it on their phones, which our low-tech barcode scanner can't scan.

The view header also has fields showing total participants checked in and not yet checked in.

Views 2 code:

http://pastebin.com/WQbxgPwL

Accompanying javascript:

http://pastebin.com/WMMeq7BF

We load the javascript from template.php in our Drupal theme, like:

Code: [Select]

function newbact_preprocess_views_view(&$variables) {
  drupal_add_js(drupal_get_path('module', 'civicrm'). '/../js/rest.js', 'theme');
  drupal_add_js(drupal_get_path('theme', 'newbact'). '/checkin.js', 'theme');
  $variables['scripts'] = drupal_get_js();
}


[jakecivi]

Thank you!

[ryeradio]

Great website, we really need something like this for our organization. Is this still all custom coding or is there an extension available to do this? If there is no extension, jcm55 would you be interested in doing some side development work?