Nieuwsbrief

Schrijf je in voor onze nieuwsbrief om op de hoogte te blijven van Blue Billywig en ander nieuws over online video.

Using data in interactive video

Today I’d like to explain a bit more to you about the different options you have when working with data in our interactive video module “Timeline”. Data can of course contain whatever you want, but in interactive video it’s often used to display personalised information or alter the interactive flow through your video’s.

Personalised video is a great way of giving your viewers a unique viewing experience adapted to their situation and needs. When we speak about personalised video we often only think about the possibility of addressing someone by name, however there are many more options. For example we can use real-time data to explain complicated bills. Or we can change the flow of the video if someone has a higher bill than last year. Or how about changing the content based on what we know somebody has already watched?

I’ll explain some of the possibilities below.

From the URL (URL parameters)

By using an external datafile like a CSV you can let viewers watch their video’s through personalised URL’s. Our player can read the right information that is passed from the CSV file to the URL. We see this option mostly being used when sending out batch emails and when there is no login to the website in place.

If you base64 encode the data in your file it's easy to send that through a personalised URL. Also see this earlier blog post: http://www.bluebillywig.com/blog/do-they-know-it’s-christmas-create-personalised-message-your-video?name=cGVyc29uYWxpc2VkIGlzIGZ1biEh (the part after “name=” is the base64 encoded message “personalised is fun!” which will appear in the video ). When you have a database of people with their email address and name it’s pretty easy to send a personalised video message this way.

Reading data from the page using javascript

For example when a user is logged in to your website or web-portal and you have their personal information handy, it’s easy to add a little bit of javascript to the page which then returns the part of the user’s data like their name, this month’s revenue or bill. This option is also really great because it generates realtime personalised video.

Example: On your web-portal page you set up the following method:

  1. window.getDataFromUser = function( dataPart ){
  2.     return userData[ dataPart ]; // userData is of course an object containing any data you would want to disclose. i.e.: var userData = { firstName: “John”, lastName: “Smith” };
  3. }

In your text label widget in the timeline you then set a javascript source to:

  1. getDataFromUser(“firstName”);

This way, the data never leaves your already secure web page and is only available to the logged in user.

Don’t have a login to your website in place? No worries, this will also work with social integrations such as Facebook API.

Using data from earlier user input or choices.

Let your viewers choose or fill in the information in the video realtime while they are watching. With local storage we can save data in the user’s browser local storage and request it at a later time in another video. You could also combine this with your own data. We set all our localStorage values with the prefix ”bbtl_”. So if you set your own data to a localStorage value like this: localStorage.setItem("bbtl_lastName", "Smith"); you can request it in our timeline interface using the localStorage value “lastName”. This way you can also save choices the user made earlier in the interactive flow, and present another video or flow based on these previous decisions.

Combining

Of course there are a lot of combinations of the above imaginable. For example you could email the user with his user ID and a sessionToken in the URL which then logs in the user and the data is presented on the page itself using javascript.

We’re always interested in supporting a broad spectrum of situations, so should you encounter another workflow that is not yet possible, please let us know!

Vincent

As part of the development team at Blue Billywig, his main focus is on front-end and ad-services. Using Javascript, HTML5 and CSS he helps to create Blue BIllywig's custom video player as well as the front-end of the video management system. In his free time he likes playing (beach-) volleyball, watching television series and movies as well as enjoying good food (and drinks), preferably in his hometown Utrecht.