Feedback
Answered

How to use Embed on own website with variables


Userlevel 1

Hi,

We’ve embedded the video code onto our website and we also want to pass trough the variables that we use in the video. What we currently have is https://website.nl/action/#contact_name=Test. But it doesn’t show up in the video.

 

We are using this embed script:

<iframe src="https://www.videoask.com/XXXXXX"
allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
width="100%"
height="600px"
style="border: none; border-radius: 24px"
>
</iframe>

 

icon

Best answer by Maud 17 March 2022, 16:53

View original

10 replies

Userlevel 7
Badge +5

Hi @Maud welcome to the community!

Great question - it’s not possible to use contact variables through an embedded videoask, you need to be able to swap out the XXXX place holder in the videoask URL for the contact information so it won’t work if the videoask is embedded, only if you’re sharing it via the link, maybe in an email or text message.

The main use for variables in an embedded videoask would probably be tracking the source - so you can see where people are coming from when they land on your videoask.

Hope that helps, but let me know if you have more questions!

Userlevel 1

Hi Grace!

 

We’ve been able to get this working. It’s ‘quick and dirty’, but it works!

<div id="videoask_iframe"></div>

<script>
function getAllUrlParams(url) {
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
var obj = {};
if (queryString) {
queryString = queryString.split('#')[0];
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
var a = arr[i].split('=');
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

if (paramName.match(/\[(\d+)?\]$/)) {
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];

if (paramName.match(/\[\d+\]$/)) {
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
obj[key].push(paramValue);
}
} else {
if (!obj[paramName]) {
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
obj[paramName].push(paramValue);
}
}
}
}

return obj;
}
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const get_name = urlParams.get('contact_name');
document.getElementById("videoask_iframe").innerHTML = '<iframe src="https://www.videoask.com/XXX#contact_name='+ get_name +'" allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;" width="100%"height="600px" style="border: none; border-radius: 24px"></iframe>';
</script>


 

Userlevel 7
Badge +5

Hey @Maud thanks so much for sharing this!

Do you have tracking/contact info in the web page URL that you’re passing through the videoask embed?

 

Userlevel 1

Yes, we get the info from our campaign sent with MailBlue / ActiveCampaign.

Userlevel 7
Badge +5

Awesome! Thanks so much for sharing your workaround, and also thanks for answering your own question here :smile:

I was chatting to some of the support team about this and they also shared this code for a workaround:
 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script>

const pathname = window.location.pathname;

var iframe = document.createElement('iframe');

iframe.setAttribute('id', 'iframe');

iframe.style.width = "640px";

iframe.style.height = "480px";

iframe.style.border = "none";

iframe.allow = "camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"

document.body.appendChild(iframe);

iframe.setAttribute('src', 'https://www.videoask.com/XXXXXXXXXX#source=' + pathname, 'allow', '"camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"', 'width', '"100%"', 'height', '"600px"', 'style', '"border: none; border-radius: 24px"');

</script>

</body>

</html>

 

You’d need to replace the “https://www.videoask.com/XXXXXXXXXX” with your videoask URL. Also,  add a “source” variable in the videoask (under the Share + Embed tab). 

Glad you got it working though, ‘quick and dirty’ is the name of the game sometimes! 

Userlevel 1

Hi there. Can you just elaborate on the “source” I would need to add, besides the videoask url?  I think I can follow your code otherwise.

 

Userlevel 7
Badge +5

Hi @Jeanne Dimmick 

The source would be whatever it is that you’re tracking through the embedded videoask, so it could be the source of traffic. You’d need to create a custom variable under the share and embed tab to reflect it.

How are you embedding your videoask? 

Hi,

We’ve embedded the video code onto our website link and we also want to pass trough the variables that we use in the video. What we currently have is https://website.nl/action/#contact_name=Test. But it doesn’t show up in the video.

 

We are using this embed script:

<iframe src="https://www.videoask.com/XXXXXX"
allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
width="100%"
height="600px"
style="border: none; border-radius: 24px"
>
</iframe>

 

I might want to add, except the video ask URL? I think I'm able to comply with your code otherwise.

Userlevel 7
Badge +5

Hi @Ensminger1122 let us know how you get on with the code and if you need help with anything else 😊

Hi @Maud welcome to the community!

Great question - it’s not possible to use contact variables through an embedded videoask, you need to be able to swap out the XXXX place holder in the videoask URL for the contact information so it won’t work if the videoask is embedded, only if you’re sharing it via the link, maybe in an email or text message.

The main use for variables in an embedded videoask would probably be tracking the source - so you can see where people are coming from when they land on your video

Hope that helps, but let me know if you have more questions!

Bump

Reply