Web Platform Lessons
Data Integration
Get started with our lesson that will teach you how to link embed videos, use data integration and much more.
Close
Get started with our lesson that will teach you how to link embed videos, use data integration and much more.
There are 2 options to embed a VML Player and video within your site, the options are static or dynamic.
Static
Hosting 1 VML project on 1 page. The VML video cannot change as it is hardcoded within the iFrame URL
Step One
Add the following iFrame to your web page where you want to display it within the page.
<iframe onload="frameInit()" src="https://player.vml.technology/v1/?id=YOUR_PROJECT_ID" id="videoiFrame" allowfullscreen></iframe>
You should set the correct ID within the iFrame from the video, you will be told this ID from the VML campaign summary page.
Step Two
Initialising the player and send variables data for the player to use.
<script>
function frameInit() {
var data = {"urlParameters": "", "localData":""}
document.getElementById('videoiFrame') .contentWindow.postMessage(data, "*");
}
<script>
Dynamic
A dynamic implementation means that a VML video can change based on a URL parameter passing in a video ID to allow you to use 1 page to host many VML videos.
The URL for this page must contain the url paramerter vml_id e.g. https://samplewebpage.com/vml_video/?vml_id=VML_ID
Step 1
Add the following iFrame to your web page where you want to display it within the page.
<iframe onload="frameInit()" src="https://player.vml.technology/v1/? id="videoiFrame" allowfullscreen></iframe>
Below is a full sample of how to retrieve
function frameInit() {
const url = window.location.href;
var urlParameters = url.substring(url.indexOf("?")+1);
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const vml_id = urlParams.get('vml_id');
var dataParameters = {};
dataParameters.vml_id = vml_id
var data = {"urlParameters": urlParameters, "localData":dataParameters}
document.getElementById('videoiFrame').contentWindow.postMessage
(data, "*");
}
Passing in data (for static and Dyanmic)
The player takes in 2 dictionaries of data, urlParameters and localData.
urlParameters
urlParameters are parameters that are sent to the VML service that will drive a level of personalisation for your video. The VML Platform will inform you of what URL parameters are required to be passed into the player.
localData
localData is data that is passed into the player and that is never sent to or processed by any server. This is potentially sensitive data that you can pull from your own internal systems, APIs and even web page form data.
The structure of the variable localData required to be passed into the player will set within the VML Platform and the VML platform will inform you on a per project basis what this should look like.
Examples to show how URL parameters and localData can be constructed from APIs
The way in which urlParameters and localData are constructed is within your hands. You can utilise Javascript in any way you want and return data from any aspect of your site, platform or API to construct the varaibles. Below are a few example of how you may construct the data.
Example Data Requests
Hubspot
// URL Visited by viewer: https://example.com/?productCode=abcd
<script>
function frameInit() {
const url = window.location.href;
var urlParameters = url.substring(url.indexOf("?")+1);
var apiData = await
fetchData("https://api.hubapi.com/contacts/v1/contact/vid/1234/profile?hapikey=API_KEY&property=company&property=firstname")
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const vml_id = urlParams.get('vml_id');
dataParameters.vml_id = vml_id
var data = {"urlParameters": urlParameters, "localData":apiData}
document.getElementById('videoiFrame').contentWindow.postMessage
(data, "*");
}
const fetchData = async (url, options, body) => {
try {
return await fetch(url, {
method: "GET",
options,
body: body,
headers
});
});
}
};
</script>
Using data passed via URL Encoded JSON within the web page URL
// URL: https://example.com/?productCode=abcd#%7B%22name%22%3A%22Connor%22%7D
<script>
function frameInit() {
const url = window.location.href;
var urlParameters = url.substring(url.indexOf("?")+1);
const dataParametersString = url.substring(url.indexOf("#")+1);
// Strip data from URL before passing to iFrame
urlParameters = urlParameters.replace(dataParametersString, "")
var decodedData = decodeURIComponent(dataParametersString);
var dataParameters = JSON.parse(decodedData);
var data = {"urlParameters": urlParameters, "localData":dataParameters} document. getElementById('videoiFrame').contentWindow.postMessage(data, "*");
}
</script>
// resulting urlParameters: productCode=abcd
// localData urlParameters: {"name":"Connor"}
Using Json API
<script>
function frameInit() {
const url = window.location.href;
var urlParameters = url.substring(url.indexOf("?")+1);
var apiData = await fetchData("https://your-api-url/api/contact/2021")
var data = {
"name": apiData.first_name,
"avatar": apiData.avatar,
"profile_url_cta": "https://your-api-url.com/profile/" + apiData.id,
"job_title": apiData.job_title
};
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const vml_id = urlParams.get('vml_id');
dataParameters.vml_id = vml_id;
var data = {"urlParameters": urlParameters, "localData":apiData}
document.getElementById('videoiFrame').contentWindow.postMessage(
data, "*");}
const fetchData = async (url, options, body) => {
try {
return await fetch(url, {
method: "GET",
options,
body: body,
headers
});
}
};
</script>
Responsive Player
The code below is for CSS to make sure the video responds to the device width and keeping the video in a 16:9 proportion.
<div class="video">
<div class="responsive-iframe">
<iframe onload="frameInit()" src="https://player.vml.technology/v1/" Id="videoiFrame" allowfullscreen</iframe>
</div>
</div>
.video {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
display: block;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
min-height: 100px;
display: block;
}
VML Technology revolutionises how video and data converge to deliver unprecedented levels of engagement.
