We recently hosted the “Engage Now” event in Dublin. Our goal was to demonstrate how we could build relationships with attendees, through finding more out about them and then engaging with them, combining offline and online experiences. So we built a social engagement app and had some fun.

From the Dev team perspective we wanted to create an Application that could showcase to our guests, some technologies we use; Episerver CMS (including Episerver New Forms ) and IBM Silverpop. Whilst also demonstrating innovation in how we could mash these together with other real-time technologies (Firebase and Twitter Streaming API). 

Concept

The idea was to create an App that we could use when greeting our guests as they arrive at the Event, confirm their name (from a list of known attendees), ask for their twitter name (if they had one) and take their photo.  This info would be submitted to our App’s backend, with data pushed to Silverpop -- IBM’s email marketing automation platform.  The foyer and main auditorium would have screens where the App would project the photos of the Attendees as they arrive in real-time e.g.  “Welcome <insert name here> from <company>”.

The Attendees would be encouraged to ask questions, post comments, selfies using Twitter with the hashtag #EngageNow16.  Our back-end App would be listening for such tweets by our Registered Attendees and present the Tweet on the big screen in real-time with the Attendees photo taken on their arrival.  

IMB marketing cloud

This is what the IMB Marketing Cloud user interface looked like

This allows us to track the activity of guests and react accordingly for example, during intervals throughout the day. our guests were entertained with some music videos and allowed to interact with the Video Jukebox using Twitter hashtags e.g. “#EngageNow2016 #Play5” (i.e. play song 5 from the playlist).  Again, the playlist would be updated in real-time.

Implementation

Pre-Event

Before the event our 60+ attendees signed-up using the Event Registration page on our website.  The data collected was pushed into IBM Silverpop (Marketing Automation & Email Marketing Software). Attendees would have received some reminder information from Silverpop about the event before the big day.

 IMB marketing cloud email

The IMB cloud user interface allowed us to style and send emails to attendees based on their preferences.

On Arrival

Register for Engage Now

Attendees registering for Engage Now 2016

As attendees arrived at the event they were greeted by the Engage team.  Our greeters then used their iPads - loaded with our App’s web interface - to confirm;

  • the person’s name by selecting them from a list on screen (List of Users retrieved from our IBM Silverpop data repository)
  • Twitter name
  • Finally, taking their photo (with consent)

The photos were pushed into Episerver’s Media Gallery.  This also was part of a demo later in the event, where we could exhibit how easy it is to create up a CMS Page with personalisation within Episerver, and as part of this demo we were able to re-use our guests profile photo’s.

Our primary objective was to ensure data pushed into our App was relayed to the front-end Users (i.e. out big screen tv’s) in real-time.  To make this happen we used Firebase

As the Attendees data was pushed in, Firebase would trigger real-time “added” events to any listener, and let the listener know all about the new data inserted.  In our scenario the listener was our webpage displayed on the big screens tv’s.  The big screens would then update to show the photo of our lovely guest along with a Welcome message. The guest’s photo then returning to the Attended wall/collage for permanent display during the event.

 

On Registration and as data was pushed to Silverpop, Silverpop was triggered to send our Guests a welcome email containing a web link to our Episerver CMS site and custom built Episerver Form.  The Form gathered some personalised information about our guests and was pushed to Silverpop for us to build up their profile.

During the event

As the day unfolded, our Guests were encouraged to interact using Twitter if they wanted to ask our presenters a question, post a selfie, or request a video from the jukebox. 

engage now selfies

For this to work we used the Twitter Stream API.  We created a backend Windows Service that opened up an asynchronous HTTP connection to the Twitter Stream API, and sat there listening for our Twitter hashtag of choice #EngageNow16.

Once the Twitter Stream API intercepted any tweets matching #EngageNow16, our Windows Service analysed the payload to first of all check did the Tweet originate from one of our Registered Attendees.  This was because one of our business rules was to only process Tweets arriving from our lovely attendees only.  If the Tweet was from an Attendee we then pushed the data to IBM Silverpop and stored against our guests pre-existing Silverpop profile, and also pushed the data to Firebase.  As mentioned previously the beauty of Firebase is that it pushes out real-time events. 

Our App on the Big Screens received the event “added” from Firebase and was able to present on screen our Guests Tweet, and accompanying image (if applicable).  Our guests were also encourage to interact using the #EngageNow16 tag to select a video from our defined playlist for the Video Jukebox, or use the Selfie tag to share a photo during their day.

All data pushed to the client screens in near real-time.

Note: unless you go Twitter Firehose, Twitter will only guarantee you 1% of coverage of Tweets real-time – however should the Hashtag you listen for be relatively unique you should be covered – as we were with a very specific #EngageNow16 tag.

Technologies Used

  • Firebase (Realtime noSql database)
  • Twitter Stream API
  • Episerver CMS 9
  • IBM Silverpop

The rest was a combination of some delightful HTML5, CSS3 and Javascript.

For anyone that’s still interested in how it all hung together here’s a System Diagram…

Get in touch if you are interested in receiving a demo or finding out more on the technologies discussed in this blog.