Live poll using QR Code & Web Triggers

Show & Tell
1

Hi Intuiface community!

For those who were able to attend our Interactive 2020 user conference, you’ll recognize the live poll demo that I used at the end of my Tips & Tricks session. I’m planning to post more of these tips later, but I’ve been frequently asked to share the live polling scenario, so here we go.

Video Demo First

With a nice audience, you get way better results :wink:
Below are the analytics from the live session during Interactive 2020, plus the rehearsal data while I was setting up the XP.

image
image1494×589 32.1 KB

How It Works

This experience combines a few features from Intuiface

  • an Excel file to make the connection between a device name and a Web Trigger API Key
  • the System Information Interface Asset to retrieve the name of the device running the experience
  • a Text Manipulation Interface Asset to generate the proper website URL, including the device name & credential key.
  • The QR Code generator Interface Asset to generate the code to be scanned by the audience’s mobile devices
  • Web Triggers API, used by the HTML page loaded on each device to send commands back to the running experience
  • 2 Simple Counters to count the responses
  • 2 Linear Gauges to display the results live
  • Analytics to keep track of the votes

The Workflow

When launching the experience, a filter is applied to the Excel file based on the device name, provided by the System Info IA. The credential key pulled from the Excel file is used by the Text Manipulation IA to generate the proper URL, which is then encoded into a QR Code.

When the user scans the code using his/her mobile device, the loaded webpage knows the credential key & device name it should use in the Web Trigger API calls and performs the call associated with the button clicked on the webpage.

The experience uses the “Message is received” trigger with conditions (either Yes or No) to increment the proper counter and log the data using Analytics.

How To Try It

  1. Download the experience here and open it in Composer
  2. Edit the AccountToCredentialKey Excel file and enter your device name and associated credential keys. Make sure the credential key belongs to the same Intuiface account that owns the Composer / Player license used by your device.
    1. To find your device name, in Composer, open the X-Ray panel of the System Info. See snapshot below.
    2. Copy the device name (not the display name) in Excel. Be careful, this is case sensitive.
  3. Hit Play and scan the QR Code with your smart phone.

image
image726×768 40 KB

How To Modify It / Create Your Own Mobile Webpage

You’ll need to create the webpage on your own, but the script to use in that page is the one provided in this article.

9 Likes
2

This is such a beautiful demo @seb. Thanks for sharing the behind the scenes. The more I learn about Web Triggers and APIs, the more opportunities I see to plug Intuiface in various scenarios. Thanks!

3 Likes
3

Yes, great demo @Seb, thanks for sharing!

I have one question though, how do you handle multiple votes from the same smartphone device? Can you limit that to just one vote with the current implementation?

1 Like
4

HI @miguel_rosa,

That’s a very good question!
My version of the web triggers API is “a simple one” and definitely leaves room for improvement.

I recommend you to read this thread: Web triggers remote - Controlling kiosk from a mobile question
@Ryan improved my workflow by adding a unique session so that only 1 phone can control a screen at a time.

In the same way, the live poll would require 1 phone to be able to send a vote only once. Code could be written using cookies on the web page side, or the XP would store each unique ID and prevent a phone to vote twice with the same ID.

This involves more JS development on the mobile web page side, and that’s where our system integrators will have more value than me :slight_smile:

1 Like
5

I’d consider using a timer that displays a random number on the kiosk which changes every hour, and on the mobile webpage have a form input, so the user adds the code, and clicks the button. once they click the button it submits the response to the kiosk, it sets a Cookie on their device and get it to expire in 1 day, if they refresh use jQuery to hide the form submit. Obviously there are ways around this, but it’s not like entering lottery for free =).

I’ll setup the example tonight after work if i get time.