iBeacon and HTML5: Belly Checks in with Bluetooth LE

Belly, the popular loyalty check-in program for retailers, has been playing around with Bluetooth LE and in a recent blog post outlines how it uses an HTML5 app to call the native iBeacon capabilities on a phone.

iBeacon Belly | Image by Belly
iBeacon Belly | Image by Belly

The advantage? When compared to NFC or their standard check-in process (which uses QR codes), Bluetooth LE check-ins drastically reduce friction for the user:

“Utilizing iBeacon drastically reduces this checkin friction and allows us to securely prefetch information about nearby devices before a Belly user reaches the checkin terminal (the device’s name, the user’s ID and Email, and a one-time-use Access Token). We can use this information of nearby devices to allow quick scan-free checkins for our users.”

Communicating Between Beacon and Receiver Using BTLE

After enabling the Belly iPad terminal to act as a beacon, Belly uses a checkin token and Apple’s BTLE Central Peripheral Transfer to make it happen:

“The two files BTLECentralViewController.m and BTLEPeripheralViewController.m contain the bulk of the Bluetooth code.

- (void)peripheral:(CBPeripheral *)peripheral didUpdateValueForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error on line 252 of BTLECentralViewController.m has an example of pulling data out of the connection.

- (void)sendData on line 264 in BTLEPeripheralViewController has an example of sending the data. We based most of our code around what’s in these two files. You don’t need to know much about Bluetooth to get something working, using these two files as a road map.”

Using CoffeeScript Instead of Native Code

What I found the most intriguing about the approach Belly took was its use of HTML5 in the client app to act on the discovery of beacons:

Our HTML5 app subscribes to a channel that receives nearby device events from the native Bluetooth Beacon. These events happen very rapidly with a record of which device was found. We maintain a Backbone Collection of Nearby Devices that handles the event channel. For every device that is active, we look through the collection to see if that user is already active. If device is already active, we use the Keepalive pattern to ensure that we keep a record of that device. The Nearby Device model is automatically pruned from the collection after 5 seconds since it was last active. 

They provide an example of the CoffeeScript implementation.

iBeacon is a natural extension for existing coupon, loyalty and check-in programs. Belly not only shows that it can help reduce user friction at check-in, but that it can accomplish it with some elegant coding that goes beyond native iOS into elegant deployment of HTML5.

They show the app in action:

Join Our Mailing List: Once-a-Week
Join our weekly mailing list for ‘BEEKn unplugged’ – I rant a little each Friday and share stuff that doesn’t make it on the site. Be the Beacon!


3 thoughts on “iBeacon and HTML5: Belly Checks in with Bluetooth LE

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s