Personalize using postMessage

Personalize using postMessage

Configurating the video project

Firstly, a video project has to be created, wherein the desired variables have to be configured. You can add these in the form of ‘tags’ if they consist of forms of textual personalization, or within the variable trigger if the aim is to create segments of scenes or images

You can read how to configurate tags hier. You can read how to use the variable trigger hier.

Embed a video with a custom code

Step 1. Providing the code with variables

To make the player communicate with a website, a conversion had to take place between the variables as defined in the website, and the variables as configured in the Ivory Studio project. You can use the example of the script provided below. Adjust the code with the variables of your choice.<script>

  1. window.addEventListener("message", receiveMessage, false); 
  2. function sendMessage(name, obj) {
  3.  document.getElementById("iv_iframe").contentWindow.postMessage(
  4.  JSON.stringify({ type: name, data: obj }), "*");
  5. }
  6. function receiveMessage(msg) {
  7.  msg = JSON.parse(;
  8.  if(msg.type == "videoLoaded") {
  9.   var obj = {
  10. "ivory-variabele_1" : "klant-variabele_x",
  11. "ivory-variabele_2" : "klant-variabele_y" ",
  12. "ivory-variabele_3"" : "klant-variabele_z"
  13.   }
  14.   sendMessage( "variables", obj );
  15.  }
  16. }
  17. </script>

Step 2. Placing the embed code

Publish the project and place the embedded code on the website, together with the custom code. It does not matter which variant of the embedded code you use. Attention: the custom code from Step 1. has to be listed before the iFrame code.

    • Related Articles

    • Animate using keyframes

      Keyframes are the set-up positions of elements on their specific moments on the timeline. By using more than one keyframe, it is possible to linearly animate elements. Working with keyframes allows you to have elements move over the screen on the ...
    • Using Input Field

      The Input Field component allows you to create and edit variables. Variables are elements that can assume a certain value. A variable consists of a key and a value. The key is the ‘label’ of the variable, and is used to identify the variable. The ...
    • Metadata in URL using parameters

      Metadata in URL using parameters There are ways to give extra information to the interactive video from external information sources. One of these ways is to add some code (parameters) behind the project link to add meta-data. This way you can add ...
    • Using Email Gate

      The Email Gate component allows you to collect email addresses from viewers. Viewers can submit their emailadres by way of a simple form. The contact details will be sent to a mailbox of your choice. This direct method of lead generation adds to an ...
    • Using Contact Form

      The Contact Form component is a user-friendly and flexibly deployable contact form. With this ‘form builder’, you can create form for different purposes. You can for example have your target audience make contact, but you can also use this feature to ...