Personalize using postMessage

PostMessage is a safe method to communicate between different domains, for example between a website and an embedded Ivory player (iFrame). This allows you to personalize video’s realtime. The data is sent directly from a webpage to the iFrame, ensuring that the data remains client-side. This technique is preferable when you wish to extract information from a webpage without having to save it in the Ivory Studio environment. The advantage of this technique is that all personal data is saved in the customers own digital environment (personal systems, websites, data warehouses, etc.) so that no personal data is shared with third parties. This construction is compatible with policy around data security as prescribed by the GDPR (AVG in Dutch).

We have provided a visual representation of the diverse lines of communication± 

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