Answered

How to use Embed on own website with variables

Maud
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

Grace
Rank
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!

If cauliflower can become pizza, you my friend can do anything
Maud
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>


 

Grace
Rank
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?

 

If cauliflower can become pizza, you my friend can do anything
Maud
Userlevel 1

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

Grace
Rank
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! 

If cauliflower can become pizza, you my friend can do anything
Jeanne Dimmick
Userlevel 3
Badge +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.

 

Grace
Rank
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? 

If cauliflower can become pizza, you my friend can do anything
E

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.

Grace
Rank
Userlevel 7
Badge +5

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

If cauliflower can become pizza, you my friend can do anything
E

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


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs