Doesn’t time fly: it’s December again and we’re heading into the festive season. The time when companies send Christmas greetings to their customers and employees. Wouldn’t it be great if you could send a personalized video as a Christmas greeting? A new feature in our Interactive Timeline Module makes this much easier to do: you can now use a value from the page’s url (query string) as a data source. This means you can add your viewer’s name or another personalized message as a query string parameter to the clip’s url and let a text widget read and show this value. In this post I will take you through an example of how you can do this.

Example personalized video message

How does it work?

Reading the query string variable

The video above contains one form text field for both the input and output of the name you want to show. In the screenshot below you can see how the value of the text field is set through a query string variable. Initially the field is empty, but if you enter a name and click on the “create” button it will navigate to the same url with ?name= attached to it. This query string variable (“name”) now has a value which can be shown in the text field. As you can see in the video, encoded messages can be read as well.

 

personalized christmas video in the timeline editor

 

Setting the query string variable

In my example I create the query string using local storage and Javascript. However, before I’ll continue explaining how this works in the example, I should point out that this is not your typical use case.

EXAMPLE USE CASES

If you want to show the viewer’s name in the video it is more common to use a placeholder in your bulk email tool. The placeholder is used to retrieve the name from the list of people you’re sending the personalized video to, which you then attach as a query string to the url of the video. The right name will be filled in automatically and you can read the query string variable in your interactive video.

There’s a blog post on video in email if you’re interested in this topic.

Another use case: send your customers a personal “thank you” video after they paid for an order. Simply embed a video on your “payment accepted” page and add a thank you message to the embed url.

JAVASCRIPT IN THE INTERACTIVE TIMELINE MODULE
In the example video I placed the input value from the form text field widget into a local storage variable called “name”. When you click on the “create” button, the following javascript function will run:

 (function() { var input =btoa(localStorage.getItem("bbtl_name")); var video ='https://bb.bbvms.com/p/blog1/c/2561035.html?name=';var url = video.concat(input); window.open(url,'_blank'); }) ();

The name you enter in the form field will be retrieved from local storage and will be encoded. It is then put in the query string variable “name” after which the button navigates to the url.

Next to this, I use some conditions to determine when to show the “create” button and when to show the “create your own greeting” button. As you can see in the screenshot below I use a function to check whether the local storage variable “name” is filled. There’s a lot you can do with javascript.

 

conditions in the timeline editor

 

In this post I only mentioned a couple of examples and gave you a simple preview of what a personalized video message could look like. If you’re interested in creating a personalized (Christmas) video, feel free to contact us if you need any help.