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 personalized information or alter the interactive flow through your video’s.

Personalized video is a great way of giving your viewers a unique viewing experience adapted to their situation and needs. When we speak about personalized 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.

Personalized video: from the URL

By using an external datafile like a CSV you can let viewers watch their video’s through personalized 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 personalized URL. Also see this earlier blog post. When you have a database of people with their email address and name it’s pretty easy to send a personalized video message this way.

Personalized video: 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 real-time personalized video.

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

window.getDataFromUser = function( dataPart ){

    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” };


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


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.


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!